Build it under 3 hours

I am going to demonstrate how to build a website under 3 hours and encrypt your source codes to prevent or at least make it hard for your website to be reverse engineered, the programming required are HTML, CSS, PHP and MySQL. I have left my website open to anyone pleasing to attaining the source code and to further enhance and make the experience speedy I obtained and used blueprints CSS, I believe knowledge should always be available for those who seek it.

Web designing & web programming skills are essential to undertake this example, in order to produce a quality design one must consider the sites

1. objective: what do you want to achieve with your site
2. theme: what feel/mode in the essence of colour would you like to portray
3. walk through: simple enough for a user to navigate from page to page
4. simple: get to the point of what you want
5. plan: how to tackle the building and hosting of your website

Your objective will determine a lot on which type of website to build either static or dynamic, for most personal websites static are more preferable and for corporate or business dynamic website are preferable in order to attract and keep the traffic to their site and at the same time address their information to as many clients as possible

Bear in mind you must collect hosting data so as to know on which server your site is going to be, this is essential as it will determine which programs to use to build your site and database, also collect speed test data in order to determine exactly how much content you can put on a given page in other terms determine the weight of content loading time, to be on the safe side I have chosen PHP and MYSQL since most hosting sites offer these resources and to enable rapid loading I resized and used less pictures, eliminated the use of data/resources from other servers good example would be site widgets this will tremendously increase your loading speed, with the exception of Facebook.

These days one page website is a common trend it servers to give an impression of both modern and professional feel, this is because most users do not have time to go through a whole website hence you must only display exactly what they are looking for in a matter of a glance, so in order to keep up with technology one must first research on the common trend so as to give themselves a head start and decide exactly what will suit there site objective.

My plan in this case my sketch is a four page website

Fig 1: My sketched template

After having the overall sketch the second thing is to determine the content lay out by this I mean fonts, text size, colour and content position, this can be kept consistent with the help of a CSS file

Fig 2: My CSS file

CSS will allow you to use the same format through out your pages, so they are consistent with each other hence have a reflection to the user that they are in the same website, the main advantage is that you get to minimize time taken and the total work load by reusing the same code in every other  web page, this is made possible by referring or in layman’s term point the location of your CSS file to be incorporated with your web page.

<link rel=”stylesheet” href=”../alkathirikhalid/mycss.css” type=”text/css”>

 

Fig 3: Main template to be reused within the entire website

As seen above, after having that one page functioning, you can copy paste it as many times as you please and proved links for it, reuse of codes shorten the work load.

Fig 4: Filling content into the home page

All in all having a static page in the long run looses its appeal since common users will eventually get bored of viewing the same contents almost every other day but for the purpose of presenting oneself it suffice the need since your name and background never changes.

Incorporating a private message box will allow users whom want to stay anonymous to be in the position to convey there thoughts to wards you and this is sometimes crucial, if you are an open minded person and view criticism as a means to improve yourself or some users just like to stay anonymous.

Fig 5: Implementing a Form for messaging

In most cases most website would provide an area for a user to input a name, email address and also some times a phone number, but in the case above for any person whom would like to stay open can use other form of contacts as Facebook, Twitter and email.

 

Fig 6: Testing Form and MySQL database

Bellow I provide simple codes for novice on the construction of a message box and how it calls the PHP page to access and insert data by MYSQL into the database.

This is the textbox codes

<form action=”name.php” method=”post”>

<p>Private Message:

<textarea name=”message” cols=”40″ style=”height: 230px”></textarea>

<input type=”submit”>

</form>

This is the PHP and MYSQL codes

<?php
$con = mysql_connect(“host”,”user”,”password”);
if (!$con)
  {
  die(‘Could not connect: ‘ . mysql_error());
  }

mysql_select_db(“table”, $con);

$sql=”INSERT INTO table (message)
VALUES
(‘$_POST[message]’)”;

if (!mysql_query($sql,$con))
  {
  die(‘Error: ‘ . mysql_error());
  }
header(‘Location: ./’);
mysql_close($con)
?>

N/B implement validation to avoid MySQL injection

Fig 7: Viewing test inputs through PhpMyAdmin

All is well but bear in mind reverse engineering is common and you can simply prevent this by encrypting your website before hosting it.

Original code

Fig 8: Normal page

Encrypted code

Fig 9: Encrypted page

Most website would encrypt part of their pages while other contents within the same page are visible this is due to the fact that when some encryption is done some of the website layout is lost and the website just dose not appear as it suppose to, so if you are faced with this issue just encrypt those parts that are essential and discard the rest in its original format.

The approach and advice I would lend is to

Fig 10: Hierarchical division

Fig 11: Dummy files

Fig 12: URL shortening

1. Before building your site divide the task in a hierarchical manner (Fig 10)where by you put webpages a side from the content pages by content I refer to images or any other material that you are going to use for your website i.e webpage folder and image folder this division will allow you to focus on the things that matter at a given time, rather than having all contents in one folder the chances of getting confused and wasting time looking for just one particle file are high, this method will be minimize and almost eliminate confusion and time wasted
2. Create dummy files (Fig 11) within those folders and rename them accordingly it much more understandable for a page to be named home rather than index, then paste in your template code all at once followed by link those pages individually then only you inserting contents, by this method you allow your webpages to be fully functioning then later expanding them by inserting content, this approach is faster
3. Division of pages into it’s individual folders will allow URL shortening (Fig 12) and encapsulation technics to be applied such as htaccess so as to enforce per-directory access control, hence you point a user to a folder rather than a file, example if a user visits my site http://www.alkathirikhalid.com the server take the user to http://www.alkathirikhalid.com/home/ so the user knows they are in the home page rather than http://www.alkathirikhalid.com/home.html or any other extensions, novice users do not necessary need to know if your site is .htm .html .xhtml or .aspx this simple notation allows your site to be more presentable with a professional appeal
4. Rather than building everything from scratch try to incorporate outside tools and reuse codes, for every code you build once try as much as possible to build it in a manner that would accommodate any future change and also revise it into a template to be in the position to be use later this minimizes time and energy, some good resource can be found on the web
5. Anticipate the size for the scroll bar so that a short page might not look out of line with the rest while a use navigates through your site, this can be achieved by making all pages exactly the same size or almost equivalent
6. Test your website with as many web browsers as possible in order to detect and fix any bugs

www.alkathirikhalid.com

Thank You.