Article 1

My guide towards programing an interactive website

Have you ever wondered how to start programming an interactive website? Well in this article you will find out my guide on building an interactive website. From the most simplest thing to the most advanced stuff. There are many things to learn in order to make an interactive website that can also save data. You need to learn html, css, python, javascript, http. Now let's begin your journey into this cool world of website programming.

The most basic langage out of all of the languages listed above is html. Html in the full form is Hyper Text Markup Language. Html is basically all kinds of different tags. It is the foundations of any website you see even like this one you are reading it on.

Even if the website is not interactive it still has a lot of html and css which we will talk about later. What is an interactive website? An interactive website is where you can interact with the website. For an example docs. In docs there is interaction because you can type stuff in the blank space. There are ways to change the font of the text. Also color,highlight,positioning and many more functionalities. Some other examples are gmail ,slides ,w3schools and drive.

The other language that is basic is css. Css full name is Cascading Style Sheets. Css is all of the styling on the page. From the most basic ones and two examples are color,font size, and one example of the intermediate one for an example resizing a div and more to come. A div is basically a html tag that is a container for more html tags. You can also do css with javascript and we will talk about javascript in the next paragraph.

Javascript is the programming language for the front end of a website. Javascript can do very simple things like print something in the inspector. It can also read values from a textbox. Make a table using a for loop. Have different conditions and show different colors on a div based on the conditions that the user enters into a textbox. In order to do these things you would need to use a js library script tag.

The last language that you need to know is python. Python is a language that has so many modules. Python is a useful thing to learn for website building because that is one of the languages that you can use in the back end of a website. We will be talking about the python modules that are related to website building and not related.

Now let's dive into different script tags that are available to you. The first one is a jquery script tag you have to put in your website because that is how to make the website simple interactions like submit a textbox and read the value of it. The second one is bootstrap it allows you to do cool things like collapse something without you having to do any css or javascript things just needs a few html tags elements properties. The last one you might need later on in website building is tinymce script tag this will allow you to get a textarea that can allow you to get plugins for it. There are other things you can do with tinymce but one of them is the textarea.

Before we get into the back end modules you should know you need to learn two things. What are languages for the front end and what is the back end for? Last other thing you should know is http. The languages for the front end are javascript,css and html. The back end is used for storing information to a database. The language that is for the back end is python. Http is a communication between the client and the server. The client is the browser and the server will receive the data. After it receives it is going to run an application to process the request. Then the server returns a http output to the client and then the client receives the response. This is a typical http response and request circle if you send html,javascript,css,jpg it will return that for example it will return html file. The server will return xml or json. To connect the two sides you will need ajax and json. Now you have learned that we can go on to more interesting things in the back end and how to connect it to the front end.

In order to send data to the back end or any information you need to have ajax in the front end. Ajax is a way to connect the two sides like the paragraph said above you can send information to the back end and back to the front. Ajax can have many methods of http two of them are posted and get. The post method is basically sending the data to the back end and the get is getting the data from the back end. Json is a way to send data from the front end to the back end or send it from the back end to the front end. Json is a way to get the data to the database.

Now you have learned more stuff about the back end let's go and talk about two python modules you should use. One of them is django and the other one is json. Django is a module that can get and post stuff into the database and more. It also has built in stuff like a login system. It can create models which are the data classes. Json module is a way to process the front end json and save it to the database or other things with it.

There are other modules in python like turtle,tkinter,graphics. The turtle module is a simple drawing module and it is also a simple game module. The tkinter module is a gui module and gui stand for graphical user interface. The graphics module is an advanced drawing with less line of code than the turtle module.

Why can you not use python in the front end beside learning javascript? Javascript is a language that can be for the web and python is one of the languages for the back. Why can you not use normal javascript beside using the library jquery? You need to use jquery beside normal javascript to get values from the text box and to have cool functionality with the html tags. What are useful tools to use? The useful tools in programming in general are website , the inspector and the debugger. What programming software should I use? Pycharm because it is good and I've been using it for a while. One other tool you can use is the website w3school it has all kind of languages and if you need a refresher on something that is a good website to do it on.

This is what it takes to make a website. It might take you a while depending how much time you put in learning the languages. In the end it will be worth it because you can make a lot of cool websites with these languages. You can even publish a website and have it in the universe.

Html Example

Css Example

Javascript Example

Python Database Example

Bootstrap Example

Html Examples

This is a div with some css

This is a checkbox

This is a table

Title 1	Title 2	Title 3
Item 1	Item 2	Item 3
Item 4	Item 5	Item 6
Item 7	Item 8	Item 9

    <div style="border: red 2px solid;width:320px; height:30px;font-size:15px;
                    color: midnightblue;background: floralwhite">This is a div with some css</div>
              <button style="margin-bottom: 10px;margin-top: 10px;"> A button</button><br>
              <input type="text" placeholder="This is a textbox">
              <div style="margin-top: 10px;">
                <input style="margin-left: 30px" type="checkbox"><span style="margin-left: 10px">This is a checkbox</span>
              </div>
              <span >This is a table</span>
              <table style="font-size: 14px">
                  <tr>
                      <th>
                        Title 1
                      </th>
                       <th>
                        Title 2
                      </th>
                      <th>
                        Title 3
                      </th>
                  </tr>
                  <tr >
                      <td > Item 1  </td>
                      <td> Item 2  </td>
                      <td> Item 3  </td>
                  </tr>
                  <tr >
                      <td> Item 4  </td>
                      <td> Item 5  </td>
                      <td> Item 6  </td>
                  </tr>
                  <tr >
                      <td> Item 7</td>
                      <td> Item 8</td>
                      <td> Item 9</td>
                  </tr>
              </table>

Two options click on the text to show

Example of pure css

AdvancedBeginner

Guide

Example of css with javascript

Hi this is css with js

Show css code

Show beginner css code

Show advanced css code

Beginner Css code

1
    2
    3

<div style=" margin-left:130px; width: 100px;height: 40px;background: blue;color: whitesmoke">
                            Guide
                        </div>

Advanced Css code

                <div style="
                margin-right: 20px;
                border-left: red solid 2px;
                border-right: green solid 2px;
                border-bottom: midnightblue solid 2px;
                border-top: violet solid 2px;
                width: 100px;
                height: 60px;
                border-radius: 50px;
                padding-left: 30px;
                padding-top: 20px;
">

Show css with javascript

Css with javascript code

Html code

    <button id="hideshowbtn1">Hide/Show Div</button>
                <div id="jscssdiv1">
                    Hi this is css with js
                </div>

Javascript code

var div1 = true;
$("#hideshowbtn1").on("click",function () {
 if (div1){
        div1 = false
        $("#jscssdiv1").css("display","inline")
        $("#jscssdiv1").css("border","red solid 2px")

    }
    else{
         div1 = true
        $("#jscssdiv1").css("display","none")


    }

});

Html code

1
2
3

            <div style="margin-left:80px;margin-top:20px;padding-top: 20px;padding-left:80px;width: 200px;height: 140px" id="jsdiv">

            </div>

Javascript code

                function submitallinfo() {
                    var bordersize = $("#bordersize").val();
                    var bordercolor = $("#bordercolor").val();
                    var backgroundcolor = $("#backgroundcolor").val();
                    var textcolor = $("#textcolor").val();
                    var textsize = $("#textsize").val();
                    var word = $("#word").val();

                    $("#jsdiv").css("border" , +bordersize + "px"+" "+ bordercolor +" "+ "solid")
                     $("#jsdiv").css("background-color"," "+backgroundcolor)
                     $("#jsdiv").css("font-size"," "+textsize+"px")
                     $("#jsdiv").css("color"," "+textcolor)
                     $("#jsdiv").text(word)

                }

Note

You can put the javascript inside of a script tag or in a javascript file

Example of python

            <div>
                <input id="pythontextbox" type="text">
               <button onclick="posttextpython()">
               Submit textbox
               </button>
            </div>

function posttextpython() {
    var textboxval = $("#pythontextbox").val();

    $.ajax(
        {
            url: "api/pytextbox/",
            method: "POST",
            data: JSON.stringify({"pytextbox":textboxval}),
        }
    )

}

Python code Beware in the tabs below it is not all of the code just the saving the data code

from django.db import models

# Create your models here.

class PythonTextbox(models.Model):
    textbox = models.CharField(max_length=1000)
    def str(self):
        return self.textbox

from django.shortcuts import render
from . import models
# Create your views here.
import  json
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def pythontextbox(request):
    data = json.loads(request.body)
    textbox = models.PythonTextbox(textbox=data["pytextbox"])
    textbox.save()
    return JsonResponse(data,safe=False)

@csrf_exempt
def guide(request):
    method = request.method
    if method == "POST":
        pythontextbox(request)
        questions(request)
    return JsonResponse(method, safe=False)


def index(request):
    return  render(request,"index.html")

from django.urls import path

from . import views

urlpatterns = [
    # ex: /polls/
    path('', views.index, name='index'),
    path('api/pytextbox/',views.pythontextbox),
]

from django.contrib import admin
from . import  models
# Register your models here.

class HomeAdmin(admin.ModelAdmin):
    pass


admin.site.register(models.PythonTextbox,HomeAdmin)

Collapse content

There is a lot of collapses like this on this website

Show html code

1 2	<div data-toggle="collapse" data-target="#contentex">Collapse content</div> <div class="collapse" id="contentex">There is a lot of collapses like this on this website</div>