Get and work on local server

The web project has more than one page now. The structure clearly shows that there are parts that are shared across all of them, and it will be super tedious to change this part in each of them every time we do a small change to these part/s.
Concretely the menu.

Load parts of the website dynamically

Menu is menu, and stays the same on all pages, why should we code it in to the each page over and over again?
And so we have decided to take part out of the files and link it inside the html file as like we link the bootstrap or jquery.
The old school guys will use frames for that matter but that is completely obsolete and we are not gonna use it.
If you don’t know what frames are read and forget about them.

And so one of the possible ways can be done by javascript. Each time the page loads it will load extra html and place it where we need it.

The advantage is that we write the linking logic once and same across all files and do the changes on remote file, the menu.html and all pages will reflect that change.

And so we would end up with something like this:

		<!-- first we need to lead the jQuery -->
		<script src=""></script>
		<!-- lets load boostrap  -->
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<!-- once the jQuery is loaded will call our jquery scripts -->
		<script src="js/main.js"></script>
		<!-- load font -->
		<link href="|Lora|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&amp;subset=latin-ext" rel="stylesheet">
		<!-- load our custom style -->
		<link href="style.css" rel="stylesheet">
			my project
		<div class="container-fluid">
		<a href="index.html">
			<!-- START - here goes the menu -->
			<div id="menu">				
			<!-- END - here goes the menu -->

The main difference is that we took out the html structure defining the menu and left the empty container on its place. This container is a placeholder where we load the menu later on.

If you look in the head you might notice another new link to a main.js file. The main.js is a small javascript/jquery trick, that takes the content of a file and place it in to another file. It loads the menu.html content and place in the #menu container. If all files will load this javascript, and have the #menu container somewhere, doesn’t matter where it will put the menu structure into it.

The javascript look like this:

$(function () {
	  url: "menu.html",
	  context: document.body
	}).done(function(data) {
	  $( '#menu' ).html(data);

I don’t want you to understand the whole javascript code bit by bit, but just look at it and try to guess what it does.
It basically loads the menu.html and when it is done with loading it puts the data into the #menu container exactly as we need. And that’s it.

What is grate on this example is that you can extend it to what ever content you like, be it menu, part of the page with a some extra information. You can load to your website without reloading the page anything you can think of. If you combine it with the click event as we tried already, you can load this or that part of the website by clicking on certain objects etc.

This is all really cool, but in reality there is a catch.
If you want to load “remote” content this way it brings security issues with it and the browser won’t let you downloaded if you open the *.html page from your local PC location. More precisely the browser disallow the menu part being caught from file structure. The menu won’t show up and the console in the browser inspector tells us why:

jquery.min.js:4 XMLHttpRequest cannot load file:///Library/WebServer/localhost/college/menu.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

In other words this magic can be done only within http request not a file request.
Http request is if you request file from but not file:///yourdrive/your-file.html
See the difference?

And so it is right time to start to work on server. Fortunately we do not need a domain and hosting for this matter. We can install the server bundle on any computer, your included.

Lets install local Server

The server can be installed as a application, you’ll run each time you need to work on the project and then close it as any other app.
What this local server application does is that your computer will behave like a server. There will be a dedicated folder where all website files will take place and where from the local server serve them to your browser under a new http address, http://localhost/file.html

The localhost is a substitution (a shortcut) pointing to that dedicated server folder.

Download the Server application from here choose the right app for your system (Windblows, Mac, Linux) and install it as any other app.
Run that app.

note: on Windows you have to check to start the Apache, which is enough for now.

Put your project files into the aforementioned dedicated folder on the Win.. it’ll be on your C drive
on Mac

I recommend  you to leave all the files which are there already for now and create a new folder and put your html and other files there.
The project will be accessible on http://localhost/your-folder/ no matter if you sit on wind.. or mac or what.

The server is useful for many other reasons not just for the Javascript embedding. It supports PHP programming language, Mysql database and so on, which do not need now, but will at some point.
Plus you have your own server on your computer and you can test how it will all work on the hosting one day..

Until then..