Reasons

Before the app, the work was done mainly using Excel spreadsheets and a Windows desktop application. This kind of system lacked some great advantages that web apps could bring to the workflow.

• Availability – data viewing and planning is not limited to a small number of machines anymore and is now available throughout the whole internal network or even the web. No particular operating system is required, nor any special software, only a web browser and a network connection.

• Data consistency – all data is stored in a database managed by a Drupal instance, with regular backups and codebase under version control, so loss of data is very unlikely.

• Access control – user roles provide restricted access, reducing clutter and helping employees focus only on their part of the work.

• Friendly interface – actions are now more intuitive (drag and drop) and UI elements like calendars and modal windows help simplify the workflow. Data viewing is also greatly improved by the new, customized structure and design.

Interface

The interface of Loco planning is based on a custom grid view. The main areas are the top toolbar, the products (routes) panel, the middle toolbar and the locomotives panel.

The top toolbar consists of the following elements:

• back button – link back to the main application
• zoom controls – for zooming in/out on routes displayed on the grid

  

• period selector – selects the start and end of the time period to be displayed. A calendar UI element is displayed when focusing on the date inputs
• all info checkbox – when checked displays additional information on routes (departure and arrival stations)

  

• sort – used to sort products chronologically, by product number, route origin, route destination or distance
• filter – used to filter products containing specific route types (empty, loaded, single or shunting)

The middle toolbar has a locomotive filter (electric or diesel) and a legend on the right side for the various route types and locomotive assignment types.

Grid view types

Each grid unit represents a time unit, based on the selected period length. The distance between two bold lines represents a day, which consists of 1, 2, 4 or 24 units. The size of a unit is consistent across all view types (42 pixels).

There are 4 view types, automatically rendered according to the current period length, or specifically selected using the zoom tools:

Locomotive assignment and other interactions

A locomotive is assigned to a route by dragging the desired locomotive on the desired route (visual feedback is provided by a blue line connecting the locomotive and the current position of the mouse cursor). A modal window then pops up, in which the user can provide additional required info.

When clicking on a route or dragging a locomotive over it, the route is exposed (other products, and other routes on the same product are blurred), and additional info is displayed (assignments, times, stations, distances). If the route already has assignments, the first assigned locomotive is automatically scrolled in view (if not already visible), and dashed red lines connecting the route and its corresponding assigned locomotive times are displayed.

Technology

The Drupal instance exposes a REST API which returns JSON data. The application queries the API and renders the data using client side templates (EJS).

The architecture of the application is built around the JavascriptMVC framework.

API

The following table describes the main part of the REST API:

Front-end

Loco planning consists of a number of controllers or widgets, models and views.

Controllers

Controllers in JavascripMVC are also named widgets because of the way they work. They are attached to DOM elements and listen to events (through event delegation) that happen inside the widget. We use controllers for products and locomotives, and an interface controller for other UI interactions.

Models

Models are a great way to work with APIs. In JavascriptMVC you simply define API URLs for CRUD operations and the framework does the rest. No need to write your own ajax requests, but you can do that if you really need that level of customization.

Models allow you to define conversion and serialization functions (e.g. working with DATETIME format in PHP and JavaScript Date objects in the front-end app), custom callbacks and properties, relationships and more.

We use models for products, locomotives, routes, shuntings (loading and unloading periods) and locomotive maintenances. Routes, shuntings and maintenances all inherit from a segment model which provides common functionality for these entities.

Views

Views in JavaScriptMVC are actually JavaScript templates. The framework has built-in support for common client-side templates (and you can define other if you prefer). We chose EJS since it’s the framework creators’ recommendation and they (the templates) all basically do the same thing.

Helpers

We also built some helper classes for period handling, grid positioning and measurements, modal window control and more.

Conclusion

By building this application we managed to greatly improve the workflow of the DBS employees. We reduced the set of used software tools to just one (the browser) and we provided a custom, much more pleasing working experience.

When it comes to automating and simplifying workflows, securing and centralizing data, and making a software product largely available, the old ways are just not enough anymore. Since the web is here and is one of the most reliable and fastest growing industries, it can overcome many of the drawbacks caused by specific environments and vendor software.

Combining creativity and technology, supported by this great, universal environment (the Web), is certainly one of the best ways to simplify our work and our lives, thus making them even more enjoyable.

Long time no “see”

We are eager to tell you what epoint did in the last months. We focused our attention on the “mobile zone” and we organized a small unit that will develop, with a lot of passion (of course) mobile applications.

Part of our team are smartphones enthusiasts and love technological toys that`s why in our agency you can find: 2 iPads, 8 iPhones and 3 Samsung Galaxys, 2 hTC Desire, one hTC Flyer and one Kindle Fire. I think that is pointless to calculate the number of game-type applications that we have in total  So it was an easy decision to start our work on a game app.

1. ab – Apache

Or how to performance Benchmark a Web server by using ab from Apache. You can use it to benchmark Apache, IIS and other web servers. It is designed to give you an impression of how your current Apache installation performs, meaning how many requests per second your Apache installation is capable of serving.

To benchmark a web server the time it will take to give a page is not important, what is important is the average time it will take when you have a maximum number of users on your site simultaneously.

Procedures:

• You need to use same hardware configuration and kernel (OS) for all tests
• You need to use same network configuration. For example, use 100Mbps port for all tests
• First record server load using top or uptime command
• Take at least 3-5 readings and use the best result
• After each test reboot the server and carry out test on next configuration (web server)
• Again record server load using top or uptime command
• Carry on test using static html/php files and dynamic pages
• It also important to carry out test using the Non-KeepAlive and KeepAlive (the Keep-Alive extension to provide long-lived HTTP sessions, which allow multiple requests to be sent over the same TCP connection) features

Example:

Note down server load using uptime command

$ uptime

Create a static (small) html page (use your own webroot):

Login to Linux/bsd desktop computer and type following command: (use your own server IP)

$ ab -n 1000 -c 5 http://202.54.200.1/htmlpage.html

Where,

• -n 1000: ab will send 1000 number of requests to server 202.54.200.1 in order to perform for the benchmarking session
• -c 5 : 5 is concurrency number i.e. ab will send 5 number of multiple requests to perform at a time to server 202.54.200.1

For example if you want to send 10 requests, type following command:

$ ab -n 10 -c 2 http://www.somewhere.com/

Repeat above command 3-5 times and save the best reading.

Please note that 1000 request is a small number you need to send bigger (i.e. the hits you want to test) requests, you should consider a larger number, like 50000.

How do I save result as a Comma separated value?

Use -e option that allows to write a comma separated value (CSV) file which contains for each percentage (from 1% to 100%) the time (in milliseconds) it took to serve that percentage of the requests:

$ ab -k -n 50000 -c 2 -e apache2r1.csv http://202.54.200.1/htmlpage.html

How do I import result into excel or gnuplot programs so that I can create graphs?

Use above command or -g option as follows:

$ ab -k -n 50000 -c 2 -g apache2r3.txt http://202.54.200.1/htmlpage.html

You can find out more by accessing http://httpd.apache.org/docs/2.0/programs/ab.html

2. Profile queries in MySql

Your queries will probably follow the 90/10 rule. 90% of your work will be caused by 10% of the queries. You need to profile your queries so you know how they really perform.

MySQL provides two main tools for understanding query performance: EXPLAIN and SHOW STATUS.

EXPLAIN

It shows the estimated execution plan of a SELECT query. It explains how indexes will be used, in what order a join is performed, estimated number of rows accessed, and so forth. Together with execution time, this is a good first approximation to a query’s performance.

Limitations:

• you can only use it with SELECT queries.
• you’re only getting an estimate. This is based on MySQL’s index statistics and whatever else it can learn about the query and tables at query compile and optimization time.

SHOW STATUS

Displays MySQL’s internal counters. MySQL increments these as it executes each query. For instance, every time the query handler advances from one entry to the next in an index, it increments a counter. One thing you can use these counters for is to get a sense of what types of operations your server does in aggregate (see the excellent mysqlreport tool for help with this).

Another use is to figure out how much work an individual query did. If you run SHOW STATUS, execute a query, and run SHOW STATUS again you can see how much the counters have incremented, and thus how much work the query did.

You can also see how non-SELECT queries perform

The technique

You  do the following:

1. Run the query a few times to “warm up” the server.
2. Run SHOW STATUS and save the result.
3. Run the query.
4. Run SHOW STATUS again and get the differences from the first time I ran it.
5. Optionally, if you are on  a quiet server, subtract the work SHOW STATUS itself causes (don’t do this on a busy server). Run SHOW STATUS twice and subtract each variable to get a baseline, then subtract this amount from the results you got above.

Let’s look at how to analyze the numbers.

How to analyze the results

I would break the results down into logical sections as follows:

1. Overall
2. Table, index, and sorting
3. Row-level operations
4. I/O operations
5. InnoDB operations, if applicable

First, two important overall measurements are the query’s time and if available, Last_query_cost. These two numbers can give you a high-level view of a query performance.

Next, look at how the query affected tables, indexes, files and sorting. To start with, look at the Select_ variables to see how many table and index scans you had, and how many range scans and joins with or without checks. The Sort_ variables tell you more about sorting. You’re striving for as few table and index scans as possible, and it’s best to sort as few rows as possible. By the way, you should also examine EXPLAIN to see what kind of sorting is used (for example, index sorts may be better than filesorts).

Row operation statistics come from the Handler_ variables. You can see not only reads, but writes as well. Sometimes you’ll see a lot of Handler_write events even in a plain SELECT query. This happens while the handler generates the result set — it doesn’t necessarily mean rows in your base tables got updated. GROUP BY queries that have to accumulate a result set are a typical scenario. Temporary tables are another, and sometimes results are materialized as intermediate temporary tables. Subqueries in the FROM clause are an example.

The fewer writes, the better — unless those writes enable many fewer reads. For example, materializing an intermediate temporary table and writing to it can save a lot of reads in grouped queries. If you rewrite a correlated, grouped subquery as a grouped subquery in the FROM clause, you only have to do the GROUP BY against the base table once, as opposed to the correlated subquery, which will probe into the base table once for every row in the outer table. In that case, the writes to the temporary table are a good trade-off. But don’t take my word for it, profile some queries and see!

I/O operations include the Key_ and Created_ variables, which tell you how much index, temp table, and temp file I/O happened. This is where you’ll see the temporary tables I just mentioned. Temp files may be the result of filesort operations. Key_read_requests and Key_write_requests tell you how many times the server asked to read or write a key block from or to the key cache. Key_reads and Key_writes tell you how often the operation had to go to disk (i.e. fetching more data from and index, or flushing an index write to disk). If you are using indexes well, it is normal to see high request values here. If your server is configured well, it is normal for virtually 100% of key read requests to be satisfied from the cache, and not have to go to disk. Even if the server isn’t configured well, each key read request should bring a block of the index into memory, which can be used to satisfy some subsequent number of read requests, so if you are seeing much less than 100% key cache hit, something is very wrong.

3. Speed Tracer (by Google)

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs.

4. Zend_Db_Profiler

Zend_Db_Profiler can be enabled to allow profiling of queries.

It includes:

• queries processed by the adapter
• elapsed time to run the queries

If you want to learn more follow this link:

http://framework.zend.com/manual/en/zend.db.profiler.html

5. xdebug

A PHP extension designed to profile your website and also debug it, the swiss army knife tool for PHP developers.

Xdebug’s basic functions include the display of stack traces on error conditions, maximum nesting level protection and time tracking.

Installing

On UNIX

pecl install xdebug

If the PECL installation does not work for you, you need to compile xdebug from source.

wget http://xdebug.org/link.php?url=xdebug201
tar -xzf xdebug-2.0.1.tgz
cd xdebug-2.0.1
phpize
./configure --enable-xdebug --with-php-config=/usr/bin/php-config
make
cp modules/xdebug.so /usr/lib/apache2/modules/xdebug.so

On Windows

If you are a Windows user, you can download a compiled DLL from xdebug.org.
Select the PHP version you are using and click the appropriate link in the Windows modules section in the right column of the page.

Then put the downloaded DLL into PHP’s extension directory ext, which should be a subdirectory of your PHP directory. You can put the DLL to any directory, provided that you state the full path to the DLL in php.ini.

Here is a link with a tutorial on how to proper test with xdebug.

http://devzone.zend.com/1120/introducing-xdebug/

http://xdebug.org/

6. PHP_Debug

The basic purpose of PHP_Debug is to provide assistance in debugging PHP code:

• program trace
• variables display
• process time
• included files
• queries executed
• watch variables

These informations are gathered through the script execution and therefore are displayed at the end of the script (in a nice floating div or a html table) so that it can be read and used at any moment.

You can find more informations here:

http://phpdebug.sourceforge.net/www/index.html

Bellow you can find some of them along with a brief explanation.

1. CSS text-transform property

Avoid writing text with capitalized letters and use instead the text-transform property to do that. The default writing should be “Lorem ipsum” and the result would be: “LOREM IPSUM”.

text-transform: uppercase/lowercase/none/capitalize

2. Use block and inline elements correctly

There is a big difference between inline and block elements.  The characteristics of block elements include:

• Always begin on a new line (they stack up underneath each other);
• Height, line-height and top and bottom margins can be manipulated;
• Width defaults to 100% of their containing element, unless a width is specified.

Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>.

Inline elements on the other hand have the opposite characteristics:

• Begin on the same line (they stack up next to each other);
• Height, line-height and top and bottom margins can’t be changed;
• Width is as long as the text/image and can’t be manipulated.

Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>.

To change an element’s status you can use display: inline or display: block. This is not good practice, unless it is absolutely necessary. This means it’s recommended for you as (front-end) developer to use the block elements like “div” when you need a block element and not use a “span” element for example with “display: block” style. This is available also for the inline elements like “b” or “i”, they must be used as inline elements when possible.

3. Font property in one declaration

Instead having these four lines declaration block:

font-family: Arial;
font-size: 12px;
font-weight: bold;
line-height: 20px;

you can use this single line declaration:

font: bold 12px/20px Arial;

4. Center horizontally

If you need to center horizontally an inline element, you can use the property

text-align:center;

To center horizontally a block element you must set the width for it and also auto for the left and right margins:

margin: 0 auto;

Lets presume that you want to horizontally center your website. You can do that by setting the big container’s margins (left and right) to auto as shown above.

But, in IE7 this will not be enough. You still need to add to the <body> tag the property

text-align:center;

5. Negative margin & text outside of an block element

You may need to put some text or an image outside your div (for example). This is easily done by setting the margin to a negative value. But in IE the text/image will not be full displayed, the outside content will be cropped. To avoid this, you must use the property position: relative.

img {
  margin: -n px;
  position: relative;
}

6. Background does not extend under the border in IE7

Background does not extend under the borders in IE7 and IE6. You may need this when you used a semi-transparent border or a dotted (etc) border.
To extend the background, you must consider the following properties depending if the tag has the hasLayout property set to true or false (more info about hasLayout here):

• Without hasLayout the background-position uses the border edge as reference, as with background-origin: border-box (so the background will extend)
• With hasLayout the background is limited to the padding area, as with background-clip: padding-box (the background will not extend)

If you want to find out more, go to this website.

7. It’s not a good practice to put style on a <tr> tag

When you want to add custom style on a table, even if you could do this by setting properties of an <tr>, this is not a good practice because it can cause different problems e.g. in IE6/7 the style is not visible. The best practice is to add style on the <td> elements of the table.

8. Lists in IE7 are wrong displayed

When you want to horizontally display a list (ul, ol with li), to avoid bugs in IE7 (the <li>s are displayed as a scale) you need to add the following property:

li {
  display:inline;
}

9. How to put an icon-image in front of a text

In most of the cases when you are displaying e.g. a social-media link you may what to display in front of it the icon-image of the website. You could add an <img> tag with the source of the icon, but that’s not the best practice.
One of the best practices is to add the icon as background and forcing its position to left:

#social-media-link {
  padding-left: n px; /* (n should the at least the width of the icon to avoid overlapping) */
  background: url(path) left center no-repeat;
}

10. Disappearing text or images in IE

IE has a very strange bug where text or background images sometimes disappears from sight. These items are still actually there, and if you highlight everything on screen or hit refresh they’ll often re-appear, but not necessary.

To repair this all you have to do is to add the following property

position: relative;

to the element that causes problems.

11. Align text in a select box

Most of the time you will want to align the text from the select box in a special way. To do that you need to remove the height of the select (if it has one defined) and add padding instead.

Unfortunately, this is not working in all browser. In Safari and IE7 we cannot add padding on a select-box.

12. IE and width & height issues

IE has a rather strange way of doing things. It doesn’t understand the min-width and min-height properties, but instead interprets width and height as min-width and min-height.

If we only use the width and height properties on a box then non-IE browsers won’t allow the box to resize. If we only use the min-width and min-height properites though then we can’t control the width or height in IE.

This can be especially problematic when using background images. If you’re using a background image that’s 80px wide and 35px high, then you’ll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text then the box size will need to expand gracefully.
To resolve this problem, you can use the following code for a box:

.box {
  width: 80px;
  height: 35px;
}

html > body .box{
  width: auto;
  height: auto;
  min-width: 80px;
  min-height: 35px;
}

All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector command. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.

13. Box-shadow at hover in IE

Creating a box-shadow on IE that appears only at hover it only works with JavaScript, not with PIE.

14. Fieldset and legend

The fieldset-legend tag is a legendary problem for web-designers. They don’t behave like normal block/inline elements so all the normal tricks to whip it into shape is useless. The <legend> tag has the ability to totally ignore whatever you want it to do. The biggest problem is that  <legend> simply wont accept a width value. It needs to get a little helper, there’s no way around it. The help comes from the <span> tag:

<fieldset>
  <legend><span>Legend link</span></legend>
  <label>Label</label>
  <input type="text" name="foo" value="" />
</fieldset>

15. Remove Dotted Link Borders

Dotted borders around links are an accessibility feature most browsers have by default. It’s for users who must or choose to navigate by keyboard, there is a visual style applied to those links when “tabbed” to. These borders also show up when the link is clicked (in it’s “active” state), and can be an eyesore depending on the design (especially when using something like CSS image replacement, the borders span the length of the screen). You can remove them with this:

a:focus, a:active {
  outline: none;
}

16. Reset your CSS

You need to reset CSS because as you’ve seen, browsers assign different styles to some elements and the best approach is to clear(reset) all styles from the beginning. In this way you’ll be sure you made a good start.

The best method I know is the Eric Mayer’s Css Reset method.

You can substantially limit the damage done by following the next steps (advices from Google Webmaster Central):

1. Pay attention to the TLD (.at, .com, .fr, .gr, .de) when you register the new Domain because is often used as a GEO location signal. When you purchase an aged domain, do a bit of research on the history of the domain, check the previous WHOIS records, check if the domain has any indexed pages on the search engines so you can exclude to be banned by one of the major search engines.
2. By upload a “comming soon” page you will allow search engines to crawl and index the new website. This will help also the search engines to detect that your site isn’t a parked domain, but instead is a real website. Then register the new domain to the webmasters centers.
3. If is possible don’t transfer directly all of your pages to the new location, but instead try moving smaller segments of it. This step is highly recommended, but optional, to avoid serious SEO problems (many changes at once can make it difficult to handle problems when they occur).
4. The next step is to upload the pages/images/files of your website to the new website.
5. Redirect the Old pages to the New ones. This action should be done on the page level, meaning that each page of the old site should be redirected to the new URL of the page on the new domain. It is recommended to use 301 redirects because in this way you manage to pass to the new website most of the metrics, characteristics and statistics (PageRank values, links, anchor text data etc) and also make the URL Redirection with the Apache URL Redirect Directive (htaccess file or in httpd.conf file).
6. Use the Change of Address tool in Google Webmaster Console. After registering both the old and the new website to Google Webmaster tools you should specify that the old one has been transferred to the new address. The Change of Address tool works at the site level.
7. Update the important Backlinks that point to your old website and link directly to the new pages. In order to get a list of all the Backlinks of your website you can use the Backlink Analyzer tool or Google Webmaster Tools console and focus only on the most important ones (top 100) and contact as many of these webmasters as possible about changing their links, including all the directories (Yahoo!, Open Directory).
8. Make sure both the old site and the new site have been verified and have Sitemaps submitted at Google Webmaster Central, Bing Webmaster Tools and Yahoo! Site Explorer.
9. Announce media and online marketing because your goals are to get as many new inbound links pointing to the site to attract a high number of branded searches for the new located site.
10. Be patient and make sure you dedicate time to test everything before you transfer your whole website. Don’t forget to maintain the 301 redirects from the old domain to the new one and to renew the change of address every 180 days. Also, monitor your rankings for the content, comparing old to new over time. Monitor your Webmaster Central account for 404 errors and see how well Google is doing with your 301s.

For those of you that don’t know, trender is the first advertising agency in Romania focusing on Word of Mouth Marketing campaigns.

Long story short, it did not went well. Here are some stuff I realized and hopefully learned during the 15 minutes pitch:

1. Prepare, prepare, prepare.  Take your time and work on the presentation. Over and over again.
2. Understand your audience.  VCs are usually busy people, they’ve seen a lot, understand the industry, so your focus should be on things that matter to them and not especially to you.
3. Ask for opinions and input from your team.  The presentation was done with Giorgiana and Octa. Thanks for your input!
4. Aks for external feedback. People that are not too close to the subject will give you a feedback from a “different” angle. I had my presentation reviewed by my friend Peach, who pointed out some of the point that would need improvement, but I had no time to integrate them. So, ask timely for advice and review from your peers.
5. Focus, focus, focus. Present things that are easy to understand by someone that 5 minutes ago had no idea what you do. I made the mistake to focus too much on the “strategic” part instead on presenting the actual situation and the next steps.
6. Because of point 5, all 3 Jury members focused on questions regarding the far future and not on the steps that have to be made “now”.  And this was the biggest mistake I made.  At this point I felt that I had “lost” them.
7. I would have been much better to do more research on the jury members to see their background and what they are “looking” for.

You can download the presentation trender WOMM evolution.

It is said that the road was built under King Carol I rule and it was now finally restored to it’s full glory. You may think that a couple of geeks like us, would have used cars to get there, at over 2000 meters high. But you couldn’t be more wrong. We like to be eco-friendly so we put up a plan to use the cars just to get to Oașa Monastery at the base of the road, and then…get ready for it….to get on our bikes and head up high in the mountains. So we trained for about a week in Timișoara’s heavy traffic, fine tuned our bikes and at the end of the week after all task were done and tickets reported to Jira as completed , we were ready for action.

Our first challenge was to fit all the bikes in the cars, we compiled a clever PHP code, scratched our heads, and voila:

So we got on the road, nearly got lost, but made it trough the wilderness and arrived way past midnight at Oașa. The people there were kind to let us in at that late time of night, we got a good nights rest, attended mass like good Christians in the morning (or we would have been dumped out of the Monastery faster then an SQL database) and assembled the bikes. It was easy to decompile them, but the awesomeness was to put them back together. Like trough engineers we got past that with success like we do with our project here at Epoint:

Of we went, putting to a test what we saw in Tour de France. Things really look a lot easier on TV, don’t they?

We’ve encountered strange visitors from another place:

Enjoyed the beauty of a mountain road:

And got tired on the last part of the ascent, after running out of road.

We’ve made it on top, and then what comes up must come down as I always say. And down we went, with spectacular speeds of more then 60km/h (that’s a lot for a bike, if some may ask). The descent got a little bumpy for some of us, but we arrived in one piece. All I can say is that it was truly…lengendary. To feel the wind coming right to your face, to overpass cars, and to see the drivers faces in shock, priceless.

The weekend came to a halt by embracing a more traditional side, to feel how it was without having laptops, mobile phone, iStuffs and other gadgets.

We enjoyed it, but we are still geeks so we gladly returned at our Epoint office in Timișoara with our batteries recharged and ready for a new awesome week of exciting projects.

After 2 months of work with a team of 5 people from our side and a great collaboration with Timm Schorsch, the Project Manager from DB Schenker it was the time to “deliver” our great project and to hold a short training on its use.

DB Schenker contacted us in order to develop an internal “TRIP” Application to ease the company`s internal work and processes and that`s what we did.

Here are a couple of pictures with our clients and a short description of DB Schenker:

1.) Make e full dump of the file system and the database so you backup your data prior to the update.

MySQL Dump: – mysqldump -u username -p database_name > database_dump.sql or, if you want a zipped sql dump mysqldump -u username -p database_name | gzip > database_dump.sql.gz
Next comes the file dump, we need to be sure to backup everything in case some goes wrong. Usualy it doesn’t, but just to be safe. File Dump: tar -czf /folder/ archive_name.tar.gz /var/www/directory_to_compress/

2.) Change the source code

If you’re using the source-distribution in the .tgz file then you need to use symbolic links. Go in the root folder of your website and in the folder “site”. /typo3installation/site/

Delete the typo3_src folder:
sudo rm -r typo3_src
Then type in the following command (while still in the folder where typo3_src used to be) to create a symbolic link to the new source folder:
ln -s /sources_folder/typo3_src-4.5.2/ typo3_src

If you’re using the .zip distribution, then replace these files and folders in the site root: media/, t3lib/, tslib/, typo3/, index.php and showpic.php

3.) Log into the install tool http://website.com/typo3/install/

You must enter a password to access the install-tool. The password is set in localconf.php:
$TYPO3_CONF_VARS["BE"]["installToolPassword"] = “bacb98acf97e0b6112b1d1b650b84971″;

Use an md5 generator to obtain the password you want. http://www.miraclesalad.com/webtools/md5.php Also for the install tool to work you need to create an ENABLE_INSTALL_TOOL file with no extension, in the typo3conf folder. In the install tool go the upgrade wizard and follow the steps there, and at the end don’t forget to compare the database and update it. click “COMPARE” at the “Update required tables” header:

4.) Update the extensions, but be careful at templavoila because you may need to remap the templates after updating it.

5.) Do some basic tests after you finish updating all the extensions:

• create a test page with a text/image element, preview it in the browser, and see if everything is ok
• check the search engine of the site
• check the contact form
• check all the links

That’s all there is to it. In the next post we will deal with the specific problems that may arise after an update.