Your First Site : Part 1

Oct 15, 2017 The Village Geek Apache, Build Site, HTML, Introduction, PHP Comment(s)

Hello There Sailor ... How's your smile doing?

Please note that this tutorial is part of the Build Your Own Site series of tutorials. Feel free to restart the series.

"Alright, alright, alright ..." - Matthew McConaughey

In the previous lessons of our site building journey, we baptised you in the deep waters of basic web development principles. Cooling you off to the rafty percussions of a coding keyboard. Quenching as that might have been; I'm afraid we're still only puddling in shallow ends of these waters, so buckle up, here comes the deep dive :). *Boy did we just murder that metaphor* In this series, we've set up your development environments, started using a text editor, learned about how sites work, and put a little html and css together. To continue on this progress of ours, we'll be building a form and submitting it. That's right, you'll be handling user input, and processing it. As usual, please get your text editor ready Thandi, you're about to write some righteous code.

"Alright, Okay ... " - Denzel Washington

Create a file in your html directory and give it the name "first_site.html" or "first_site.php. Save the file and load it in your browser as we've done countless times before in this series of tutorials. http://localhost/first_site.html" should work. After loading the page, please notice that as expected, the page is empty :). Got a keen eye there Thabo. We'll be building the page from scratch, adding every component as we go. First; the bare back html, please copy and paste it sir/madam/miss/queen:

<!DOCTYPE HTML>
<html>
<head>
<title>The First Site | Yeaaahhh Boooiiiiiyy!!</title>
</head>

<body>
Some great Content to come here ... as in be here not the uuhhmm... k neeexxxttt!!
</body>

</html>

Next we'll be adding the form to the page, essentially a contact form for your site :)

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

Yep that's as simple a form as we're gonna use for this tutorial Azizi. Note that it only has two inputs and a submit button. The two inputs are both text input fields, and have the field names "fname" and "lname" accordingly. Please study the code and see where we place this wonderful form in our html.

<!DOCTYPE HTML>
<html>
<head>
<title>The First Site | Yeaaahhh Boooiiiiiyy!!</title>
</head>

<body>
    <form action="/action_page.php" method="get">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="Submit">
    </form>
</body>

</html>

As usual, try your best to replicate the code above, reload the page and voila!

"Alright, Okay ... " - Denzel Washington

Now let's study the heck outta that form shall we. Note that the action attribute's value is "/action_page.php". This means that once the form is submitted, meaning when the user clicks the submit button; the form data will be sent to the page "http://localhost/action_page.php". The server will automatically load that page for us in the browser on form submission, and the code on that page can do whatever it wants to do with that data. Note that the method attribute of this form is "get". GET is a method to make http requests, these are ways in which the client(browser) can pass data to/communicate with the server. HTTP is the protocol we'll be using on Apache, comes standard. So to talk to any part/file on our server we just make an http request to it and the server will make sure that file/destination gets our message as intended. Pretty cool right?!! :)

"Note that the method attribute of this form is "get". GET is a mthod to make http requests, these are ways in which the client(browser) can communicate with the server."
The Village Geek

Alright that's enough info for one tutorial, we'll continue with this in the second part of the lesson. Go get some nuts and raisins, start a small wood fire and warm your hands will ya. We'll talk in a few :)

Cape Town, South Africa

Tutorials

Categories

TUTORIAL Your First Site : Part 1

Your First Site : Part 1

Reply to this discussion