website/webdevelopment/gsfullstack/programming.js

import { addBanner, addArticle, addTitle, addHeader, addParagraph, addClassParagraph, addSubHeader, addOrderedList, addUnorderedList, addBlockquote, addInset, addInsetList, addInsetCodeListing, addInsetBulletList, addImageWithCaption, addButtonGroup, addSidebar, addSyntax, menu, global_menu } from '/scripts/import.js';
import { local_menu } from '/scripts/webdev.js';

const heading = document.querySelector(".heading");
const global = document.querySelector(".global_menu");
const local = document.querySelector(".local_menu");
const sidebar = document.querySelector(".sidebar");
const main = document.querySelector(".main_content");

heading.append(addTitle("Getting Started as a Full Stack Developer"));
heading.append(addParagraph("Tom Geller - LinkedIn Learning - August 2021"));
heading.append(addParagraph("Chapter 4 - Make Things Happen with Programming"));
global.append(global_menu());
local.append(local_menu("gsfullstack"));

main.append(addHeader("Survey Types of Programming Languages"));
main.append(addSubHeader("JAVASCRIPT"));
main.append(addParagraph("One of the most common and important languages is JavaScript and this is a client-side language (for the most part).  One of the consequences of this is that it is the only language that is interpreted by the browser.  To demonstrate this, open up the console in a browser window and type this line of code."));
main.append(addSyntax("var x=5; var y=7; document.body.innerText=x+y;"));
main.append(addParagraph("Here, we are simply creating two numeric variables.  We then get the document, from that we get the body and then the body's innerText property and we set that to the value we get by adding our two numbers together.  The innerText for the body is what you see in the browser window so this effectively changes the content of the web page to, in this example, 12.  This is only operating on the client side, it has no effect on the files stored on the server and you can confirm that by clicking refresh to reload the page."));
main.append(addParagraph("It is the fact that JavaScript can be run on the browser that allows us to embed it in a webpage."));
main.append(addSubHeader("Server Side Languages"));
main.append(addParagraph("There are a lot of server side languages.  On the wiki page, <a href='https://en.wikipedia.org/wiki/Programming_languages_used_in_most_popular_websites'>Programming Languages Used in Most Popular Web Sites</a>, you can see some of these in the context of which sites use these languates.  As you can see, JavaScript is really the only langugage used on the client side (there is also TypeScript which is based on JavaScript) but there are various languages used on the server side."));
main.append(addParagraph("This raises the question of what you want to look for in a language and how this translates to deciding which language you should select.  The criteria you might follow to select a language includes the following."));
main.append(addSubHeader("ACCESSIBILITY"));
main.append(addParagraph("How hard is it to learn the language.  Some programming languages are designed to be easier to use than others and Python is a good example of that, as is JavaScript."));
main.append(addSubHeader("APPLICATION"));
main.append(addParagraph("Any programming language can be used to write any program, in theory at least!  However, you might want to consider how easy it is to accomplish a certain task in a particular example.  If we use Python as an example again, it is generally considerd to be a good language for machine learning.  This is, in part, because of the features built in to the language but is also largely down to the libraries such as TensorFlowm, NumPy and Scikit-learn (if you are interested, there is a list of the top 10 libraries for Data Science at <a href='https://www.simplilearn.com/top-python-libraries-for-data-science-main'>simplilearn.com</a>)."));
main.append(addSubHeader("SUPPORT"));
main.append(addParagraph("An important consideration is whether or not you can get support in learning your selected language.  This is especially true if you are learning the language for your current job.  Your company may provide training resources for the languages they use and you may have access to programmers who use the language and can help you out if needed."));
main.append(addSubHeader("GOALS"));
main.append(addParagraph("This is a criterion you might easily overlook, but is hugely important if you are learning a language in order to improve your job prospects or to get a specific job.  You might want to research how popular a particular language is amongst employers and whether it will help you secure the job that you want.  To give an obvious example, you may be interested in designing the look and feel of a website in which case your language of choice will be JavaScript.  On the other hand, if you are more interested in designing the logic behind the scenes, in other words, the back-end, you have a little more choice."));
main.append(addParagraph("Something to bear in mind is that if you learn a programming language, you will pick up skills that are transferable to other languages.  For example, let's say that you have learned Python and you want to pick up another language such as Java.  These are quite different languages, but when picking up a second language like this, you will already be familiar with concepts such as looping so rather than having to learn about loops in Java, you just need to learn the Java syntax for loops."));
main.append(addHeader("JavaScript,a Browser-Native Programming Language"));
main.append(addParagraph("I don't want to go into too much details here because I have already covered JavaScript in some detail elsewhere.  One point to make in the context of reasons for learning a specific language is that a lot of current trends in web development are based on technologies that are in turn based on JavaScript.  That includes libraries such as jQuery, frameworks such as React, Vue and Angular and languages built on JavaScript such as TypeScript."));
main.append(addParagraph("In addition, technologies such as Node make JavaScript available as a server-side language, so JavaScript can also be a starting point for back-end development."));
main.append(addHeader("PHP, a Web-Centric Programming Language"));
main.append(addParagraph("With PHP, we are going beyond the other web technologies we have learned so far - HTML, CSS and JavaScript and moving on to a language used on the server side.  So, if you want to learn PHP, you will need access to a web host which is fine for me since I have my own dedicated web server, but otherwise, you would either want to set up hosting or run a web server locally."));
main.append(addParagraph("To check if PHP is installed, you will need access to the server.  If you connect to it via ssh, you can run the command:"));
main.append(addSyntax("php -v"));
main.append(addParagraph("The result should be similar to that shown in figure 4."));
main.append(addImageWithCaption("./images/phpinfo.png", "Figure 4 - the result of running the command, php -v"));
main.append(addParagraph("Another way to test is to create a simple page with some PHP code such as the following:"));
main.append(addSyntax("&lt;body&gt;   &lt;?php phpinfo(); ?&gt;   &lt;/body&gt;"));
main.append(addParagraph("This will just run the command phpinfo() and if everything is working correctly, the webpage will display some information about PHP so it is a simple way to confirm it is working.  I have created a page to do that and you can access that at <a href='./samples/info.php'>PHP Info</a> and the results can be seen in figure 5."));
main.append(addImageWithCaption("./images/phpinfopage.png", "Figure 5 - A sample php info page."));
main.append(addParagraph("Although this is a very simple and quite basic example, it does demonstrate some points about php.  One point which you may have noticed if you clicked on the link, <a href='./samples/info.php'>PHP Info</a>, is that the URL it takes you to is"));
main.append(addSyntax("http://osztromok.com/temp/gsfullstack/samples/info.php"));
main.append(addParagraph("This is an HTML document but it has the extension php rather than HTML.  We need to give it this extension to let the browser know that this page can include some HTML."));
main.append(addParagraph("Let's look at an example of some PHP code.  This is an HTML file for a reservation form which we will see later in the course.  You can see the form and a copy of the code <a href='./samples/reservation_form.html' target='_blank'>here</a>."));
main.append(addParagraph("This is an HTML file with an HTML extension.  Notice that the form has an action, and this action calls a php file so the form itself does not contain any php code."));
main.append(addParagraph("The php is found in a file called reserve.php and you can see that code by clicking <a href='./samples/reserve.html' target='_blank'>here</a>."));
main.append(addParagraph("The first thing to note about the PHP file is that it looks a lot like an HTML file and actually, it is.  We give it a PHP extension so that the server knows that it contains PHP code as well."));
main.append(addParagraph("For someone who, like myself, is not really familar with PHP, it might be difficult to see how this works so this leads to some questions it might be interesting to consider here.  First though, I want to briefly describe what is happening from the user's perspective - that is, what the user sees in the browser."));
main.append(addParagraph("To start with, we are presented with a simple form with three input boxes and a button.  The input boxes allow the user to type in a name and to select a start and end date for the reservation.  The name is typed in but the dates can either be typed or selected from a calendar widget."));
main.append(addParagraph("When the reserve button is clicked, the reserve.php page is loaded.  This displays a confirmation stating that the reservation has been requested for the name you entered and the start and end date.  There is also an acknowldegement of receipt."));
main.append(addParagraph("One question you might ask yourself is where the calendar widgets come from.  Actually this is nothing to do with PHP so I will only mention it briefly.  A more relvant question is how the PHP file knows what name and dates have been entered by the user."));
main.append(addParagraph("To answer both of these questions, let's take a look at the HTML for the <a href='./samples/reservation_form.html' target='_blank'>reservation form</a>."));
main.append(addParagraph("In the body, we have a div with the id, reservations which acts as a wrapper for the form.  Let's start by looking at the first line of this form."));
main.append(addSyntax('&lt;form action="reserve.php" method="POST"&gt;'));
main.append(addParagraph("We already menioned the action attribute which basically means that the action associated with this form is a PHP so when it is triggered, it will load and run that file."));
main.append(addParagraph("This leads to the question, how is that action triggered and that happens when the button is clicked.  Let's just skip ahead to the code for that."));
main.append(addSyntax('&lt;input type="submit" value="Reserve"&gt;'));
main.append(addParagraph("Submit is an action (I guess) so when the button is clicked, this invokes an action and specifically, it invokes the action we gave the form at the start so this is how we invoke our PHP code."));
main.append(addParagraph("Going back to the first line of the form, along with the action, there is an HTTP method which in this case is POST and this tells the browser that we want to pass data from this page over to the PHP file.  Again, there is a bit of guesswork on my part but my assumption is that what is being posted (or sent) to the PHP file is the orginal HTML file along with any date that it might contain."));
main.append(addParagraph("Let's now look at one of the input boxes, starting with the box for the user's name."));
main.append(addSyntax('&lt;label for="nameres"&gt;Last name&lt;/label&gt;'));
main.append(addSyntax('&lt;input type="text" id="nameres" name="nameres"&gt;&lr;br \&gt;'));
main.append(addParagraph("This is using an HTML tag, label with a <a href='https://www.w3schools.com/tags/att_for.asp'>for</a> attribute.  The for attribute is used to link or bind a label to a specified form element which, in this example, is the input box identified by the id, nameres."));
main.append(addParagraph("The input box for the start date is similar."));
main.append(addSyntax('&lt;label for="startres"&gt;Start date&lt;/label&gt;'));
main.append(addSyntax('&lt;input type="date" id="startres" name="startres"&gt;&lt;br \&gt;'));
main.append(addParagraph("The main difference is the input type which was text for the name input box and is date for both of the date input boxes.  Since the input type is date, the browser knows that a date is expected and so provides the calendar widget so this is a nice example of using some of the code that is already provided for us."));
main.append(addParagraph("If you type in the details required and click the reserve button to trigger the action and call the PHP file, you can see what happens there by opening the developer tools and clicking on the Network tab.  We can see the POST request and it looks like this."));
main.append(addSyntax("POST	http://osztromok.com/temp/gsfullstack/samples/reserve.php"));
main.append(addParagraph("We can see this in context in the image shown in figure 6.  Note that I am viewing the website in the Firefox Developer Edition but this should look the same in the standard version of Firefox.  It looks a little different in Chrome but it displays the same information."));
main.append(addImageWithCaption("./images/post_request.png", "Figure 6 - viewing the POST request in Developer Tools."));
main.append(addParagraph("Notice that in the image shown in figure 6, we have selected the Headers tab.  There are also tabs for Cookies, Request, Response and Timings.  We are not interested in Timings here and Cookies sounds interesting but in this case, we aren't using any.  The Response tab can be quite interesting.  This shows what is being returned to the browser which in this case is just plain HTML and so that's what we will see in the Response tab (note, by that I mean the HTML as it is displayed by the browser so we will see the same thing that is displayed in the viewport).  There is an additional tab we don't see here and that is the security tab, we will only see that if the site is using a secure connection - in other HTTPS."));
main.append(addParagraph("This leaves the Request tab and that is the one we are interested in at the moment.  In figure 7, the Request tab is selected."));
main.append(addImageWithCaption("./images/form_data.png", "Figure 7 - viewing the POST request in Developer Tools with the Request tab selelcted."));
main.append(addParagraph("We can see the data that was passed over to request.php and that is the name and both the dates along with the names by which they are referenced."));
main.append(addParagraph("Let's take a look at the <a href='./samples/reserve.html' target='_blank'>PHP file</a> again.  We mentioned earlier that this is an HTML file that also includes some PHP, so we will concentrate on the parts of the code that include that PHP code."));
main.append(addParagraph("&lt;p&gt;You requested a reservation for &lt;?php echo ($_POST['nameres']) ?&gt; with the following dates:&lt;/p&gt;"));
main.append(addParagraph("This is a simple paragraph wrapped in a &lt;p&gtl tag and includes the plain text which will be displayed in the browser.  Embedded in that text is the PHP code.  The echo statement sends some text back to the paragraph to be displayed in the browser and that is the result of evaluating the expression in brackets"));
main.append(addParagraph("Inside the brackets, the expression simply returns the value that was sent to the PHP file, as we saw in figure 7 so this code simply has the effect of inserting the passed value into the paragraph.  In essence, this gives our HTML code the ability to use variables."));
main.append(addParagraph("If you open the reservation page and enter a name and the start and end dates, you should see the confirmation in the browser.  If you right click anywhere inside the viewport and select View Source, you will see the code for this page and this is shown in figure 8."));
main.append(addImageWithCaption("./images/view_source.png", "Figure 8 - viewing the spurce for reserve.php."));
main.append(addParagraph("As you can see, this shows you the HTML but it doesn't show you any PHP.  This is because PHP works on the server side to generate the HTML for the page and sends only that HTML to your browser.  It does not send any PHP.  This means that a user can view the results generated by the PHP without having access to the PHP and this can be handy if you have some clever PHP you don't want to make availabe to the public!"));
main.append(addParagraph("In the next section, we will start working on the project website for the Landon Hotel."));

addSidebar("webdev");