askIT

Enabling jQuery and Bootstrap

media-floppy.png Download files for this lesson

jQuery allows us to make JavaScripts that are important for the user interface of the website.
Boostrap makes it easy to create nice looking webdesign without writing a lot of code. We will need to download both.

Create scripts folders

We need to create new folders in our website root directory. We will have a folder for jQuery and a folder for the Bootrap files.

Download and enable jQuery

Head over to jquery.com and download compressed production jQuery. Save it to the folder "_scripts/javascripts/jquery".

jquery_site_2017-04-21.png

Edit index.php to enable jQuery

We need to add jquery-3.2.1.min.js to the header section our webdesign file. This is done by using the script tag.

<?php echo"<!DOCTYPE html>
<html lang=\"en\">
<head>
    <title>Community Website</title>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"_webdesign/reset.css\" />
    <link rel=\"stylesheet\" type=\"text/css\" href=\"_webdesign/master.css\" />

    <!-- jQuery -->
        <script type=\"text/javascript\" src=\"_scripts/javascripts/jquery/jquery-3.2.1.min.js\"></script>
    <!-- //jQuery -->

    <link rel=\"icon\" href=\"favicon.ico\" />
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
    <meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0;\"/>
</head>
<body>
    <h1>Hello! Welcome to my site!</h1>
</body>
</html>"
;
?>

Download and enable Boostrap

Go to getbootstrap.com and get the bootstrap-dist.zip file.

boostrap_site_2017-04-21.png

Unizp the file to "_scripts\javascripts\bootstrap".

Edit index.php to enable Bootstrap

We need to add bootstrap.min.css and bootstrap.min.jss to the header section our webdesign file. This is done by using the link and script tag.

<?php 
echo"<!DOCTYPE html>
<html lang=\"en\">
<head>
    <title>Community Website</title>

    <!-- Reset -->
        <link rel=\"stylesheet\" type=\"text/css\" href=\"_webdesign/reset.css\" />
    <!-- //Reset -->

    <!-- Bootstrap CSS -->
        <link href=\"_scripts/javascripts/bootstrap/css/bootstrap.min.css\" rel=\"stylesheet\">
    <!-- //Bootstrap CSS -->

    <!-- Site CSS -->
        <link rel=\"stylesheet\" type=\"text/css\" href=\"_webdesign/master.css\" />
    <!-- //Site CSS -->

    <!-- jQuery -->
        <script type=\"text/javascript\" src=\"_scripts/javascripts/jquery/jquery-3.2.1.min.js\"></script>
    <!-- //jQuery -->

    <!-- Bootstrap Javascript -->
        <script type=\"text/javascript\" src=\"_scripts/javascripts/bootstrap/js/bootstrap.min.js\"></script>
    <!-- //Bootstrap Javascript -->

    <link rel=\"icon\" href=\"favicon.ico\" />
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
    <meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0;\"/>
</head>
<body>
    

    <div class=\"page-header\">
        <h1>Hello! Welcome to my site!</h1>
    </div>
</body>
</html>"
;
?> 

Status check

You shoud now have a HTML page with CSS style sheets, favorite icon, jQuery and Bootstrap. The website should say "Hello! Welcome to my site!"
You check my files and compare it to your files.


go-previous.png Basic HTML and CSS skeleton files

start-here.png Index

go-next.png Webdesign

Add comment

avatar_blank_60.png

Comment:

Name:

Email:

Comments

No comments yet. You can be the first one to comment. Just write your comment in the form and click on the submit button.