Programming Tutorial #2: Prerequisites (Signup / Login in PHP)

Welcome to tutorial #2:

If you haven't seen my previous tutorial, click here unless you already have an IDE and wamp/lamp/xampp server setup.

Ok, so firstly we will be using these libraries:
Jquery
W3-CSS
(No download required)

This tutorial is aimed at everyone, so no experience should be necessary.

Firstly, to make sure this will work ok we will make a landing page.

Firstly, open Notepad or PHPStorm and create a new file in your www or htdocs directory and call it index.php, if it already exists, then overwrite it.

Start wamp / xampp now so that it will be ready.

Now, to start a PHP session, which is a safe way to store who is logged in at the current point in time, at the start of the file, type:

<?php session_start(); ?>

This starts/resumes a current php session and ALWAYS has to go at the top of a file.

Next, we need to set out our basic HTML document structure, so type this base structure, which is used for all well structured HTML & PHP files on the net, that display an output.

<!DOCTYPE HTML>
<html>
  <head>
  </head>

  <body>
  </body>
</html>

The head is where the invisible parts of the page go, like scripts and styles, JQuery and W3-CSS, and body is where all the visible parts go.

All the things inside of <> are known as tags and they define the layout and requirements of an HTML document, so that is what I will refer to them as now. I.e. Head Tags =

Next, to show a title in the tab of the browser, inside the head tags, we type:

<title>Sign up / Login</title>

This tells the connecting users browser what we want to display in the navigation bar.

Next, we will add our requirements, so inside the head tag, add:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>

This adds JQuery and W3.CSS to our project. Now to test that W3.CSS works,
In the body of the document, type:

<a href="login.php"><button class="w3-btn w3-round-large w3-blue w3-medium w3-padding-large">Login</button></a>
<a href="register.php"><button class="w3-btn w3-round-large w3-blue w3-medium w3-padding-large">Register</button></a>

These are links to our login and register pages which we will make later.
The a tags are links linking to the page specified under the HREF attribute and as the buttons are inside of them, it means when the button is pressed, the link is triggered.

Now, if you save the file and go to http://localhost or http://localhost:port then you should see this:

Links:
About W3.CSS
JQuery
Get the code for index.php on github
Get the code for this entire lesson on github

Note: If it isn't loading try doing CTRL+F5 to hard refresh the page.

Sort:

Trending

[-]

cadawg (69) 7 years ago

@originalworks

$0.00

originalworks (69) 7 years ago

The @OriginalWorks bot has determined this post by @cadawg to be original material and upvoted it!

To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!

Please note that this is a BETA version. Feel free to leave a reply if you feel this is an error to help improve accuracy.

resteemable (50) 7 years ago

Your Post Has Been Featured on @Resteemable!
Feature any Steemit post using resteemit.com!
How It Works:
1. Take Any Steemit URL
2. Erase https://
3. Type re
Get Featured Instantly – Featured Posts are voted every 2.4hrs
Join the Curation Team Here