Lecture 25: Writing front-end and back-end website code

August 4, 2020

Lecture Materials

Steps to set up your Stanford Web Page

Go to the Stanford CGI setup page and click on the Activate Personal CGI Service" link. Then click on Request CGI Form to activate your backend web server.
If you are on a Windows PC, Download and Install Windows Terminal
Open a Terminal (You can do it through PyCharm, or on a Mac click ⌘-spacebar and then type "terminal". On Windows, open the Terminal program you just installed).
Type the following:
```
ssh yourSUNet@myth.stanford.edu
            
```
(You will be asked to answer a yes/no question and then asked for your password, which you should type and it won't show on the screen). Next, type:
```
cd WWW
mkdir playground
cd playground
nano index.html
```
(Feel free to use a different editor than nano. Either vim or emacs is fine, but nano is the easiest to use without other experience. If you do try vim, you can type text by first going into INSERT mode by typing a lowercase-i. To exit, type the "esc" key a couple of times and then type :q and then the "return" key. In nano, type (or paste) the following:
```
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body onload="init()">
    <h1>Welcome!</h1>
    <p>Hello, Random Person!</p>
</body>
            
```
Now exit out of nano by typing ctrl-x and then "Y" to save.
Now, go to a web browser, and go to the following web page: https://web.stanford.edu/~yourSUNet/playground
(Don't forget the tilde (~) before your SUNet. You should see the following:
Welcome!
Hello, Random Person!

Now you have made your first web page!

Next, let's spice up your web page with a little bit of Javascript code. Go back to your terminal and open the file again with nano or another editor. Change the file to the following:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
<script>
function init() {
    var name = window.prompt("What is your name?");
    name_span = document.getElementById("entered_name");
    name_span.innerHTML = name;
}
</script>
</head>

<body onload="init()">

    <h1>Welcome!</h1>

    <p>Hello, <span id="entered_name">Random Person</span>!</p>

</body>

Refresh https://web.stanford.edu/~yourSUNet/playground, and you should be asked to enter your name, and this should then appear:

Welcome!

Hello, YourName!

You have now added some Javascript to your front end!

At this point, we can now write up some backend code that will allow us to save data on the server. You are going to create two python files in a directory called cgi-bin. The Stanford servers require all programs to have the extension .cgi, even if they are Python programs. To create the first, type the following:

    nano ../../cgi-bin/get-names.cgi

And then write the following file:

#!/usr/bin/env python

import json
import os

print("Content-Type: application/json\n")

if os.path.exists('names.json'):
    with open('names.json') as f:
       name_list = json.load(f)
    print(json.dumps(name_list))
else:
    print("[]")

Next, create the second file to store data:

    nano ../../cgi-bin/post-names.cgi

And type in the following:

#!/usr/bin/env python

import json
import os
import sys

print("Content-Type: application/json\n")

name = json.load(sys.stdin)['name']

if os.path.exists("names.json"):
    with open("names.json") as f:
        all_names = json.load(f)
else:
    all_names = []

all_names.append(name)
with open("names.json", "w") as f:
    json.dump(all_names, f)

print('"ok"')

Now, modify the original index.html file as follows:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
<script>
function init() {
    fetch('../cgi-bin/get-names.cgi')
      .then(response => response.json())
            .then(data => {
                    console.log(data)
                    prior_names = document.getElementById("prior_names");
                    prior_names.innerText = data;
                });

    const name = window.prompt("What is your name?");
    name_span = document.getElementById("entered_name");
    name_span.innerHTML = name;
    postName({'name': name});

}

// post the list of names to the server
function postName(opts) {
    fetch('../cgi-bin/post-names.cgi', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(opts)
}).then(response => response.json())
            .then(data => {
                    console.log(data);
                });
}
</script>
</head>

<body onload="init()">

    <h1>Welcome!</h1>

    <p>Hello, <span id="entered_name">Random Person</span>!</p>

    Other people who have been here: <span id="prior_names"></span>
</body>

You need to do two more things to make the files runnable on the webserver:

chmod +x ../../cgi-bin/get-names.cgi
chmod +x ../../cgi-bin/post-names.cgi

Now, when you go to the website, you will see that there are names that you've entered before that appear! You've now created a backend for your website!