JavaScript Tutorial for Beginners – Step by step guide!

Learn different ways of showing a "Hello world!" text on a web page using JavaScript. We will also learn how to use vanilla JavaScript plugins.

We're still working on this tutorial. Please subscribe so we can let you know once the tutorial is officially released.

Enjoy more high-quality web programming tutorials.
Subscribe now for FREE!

For now, you can choose to learn our Bootstrap tutorial for beginners.

Bootstrap Tutorial for Beginners – Step by Step Guide!

Bootstrap is a CSS framework that will make your web application look good, fast, and responsive. You won't have to worry about having a decent user interface when you use it.

I love Bootstrap because it solves a problem that I have. I'm not good at designing web app user interfaces. That is why I made this Bootstrap tutorial for beginners.

As proof, you will see that we are using Bootstrap in most of our tutorials. Here are some good looking websites or web apps built with the help of Bootstrap: http://expo.getbootstrap.com

Just a little history, Bootstrap was created on Twitter. It was called Twitter Bootstrap to streamline their development. Thanks to these people, the library is still in active development.

This Bootstrap tutorial for beginners will cover the following:

1.0 Include Bootstrap via CDN
2.0 Write HTML5 boilerplate
3.0 Include Bootstrap CSS
4.0 Include Bootstrap JavaScript
5.0 Add a navigation bar
6.0 Add navigation links
7.0 Add a dropdown
8.0 Add a search form
9.0 Add a content container
10.0 Add a heading
11.0 Add a table
12.0 Add form elements to a table
13.0 Add an alert message
14.0 Bootstrap online resources
15.0 What's next?
16.0 Related tutorials
17.0 Some notes

The following sections will be your step by step guide to your first web development with Bootstrap.

1.0 Include Bootstrap via CDN

We will use a CDN or Content delivery network to enable Bootstrap on our page.

Using Bootstrap CDN means that we will not download and store the bootstrap files in our server or local machine. We will just include the Bootstrap CSS and JavaScript links on our web page.

2.0 Write HTML5 boilerplate

Create new index.html file. Open the file, place the following code and save it.

<!DOCTYPE html>
<html lang="en">
<head>
 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap Tutorial for Beginners</title>
 
    <!-- Bootstrap CSS will be here -->
</head>
<body>
 
<!-- navigation bar will be here -->
<!-- container bar will be here -->
 
<!-- Bootstrap JavaScript will be here -->
 
</body>
</html>

Our output on this section is a blank page. We do not have any contents inside the body tags. Comments are not displayed, of course.

But if we view the source, we actually made some progress!

3.0 Include Bootstrap CSS

On index.html file, replace <!-- Bootstrap CSS will be here --> with the following code.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

The integrity and crossorigin attributes are needed for security purposes. The answers in this question can explain it better.

Our output is still a blank page. All we can do for now is view the source to see if it was updated.

4.0 Include Bootstrap JavaScript

Bootstrap features like the navigation bar need the Bootstrap JavaScript file.

On index.html file, replace <!-- Bootstrap JavaScript will be here --> with the following code.

<!-- javascript for bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>

Output? Still a blank page. But let's view the source.

5.0 Add a navigation bar

Bootstrap Navbar, also called navigation header, is so cool. They look good on the desktop and on any mobile device. Your users won't get lost on your website if you use them properly.

On index.html file, replace <!-- navigation bar will be here --> with the following code.

<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
 
    <!-- navigation links will be here -->
</nav>
<!-- /navbar -->

Output? Yes! This is the first time (in this tutorial) that we will see something on the page.

6.0 Add navigation links

On index.html file, replace <!-- navigation links will be here --> with the following code.

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html" target="_blank">Tutorial</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://www.codeofaninja.com" target="_blank">Blog</a>
        </li>
        <!-- drop down will be here -->
    </ul>
    <!-- search form will be here -->
</div>

Our output shows navigation links on the Navbar.

7.0 Add a drop down

On index.html file, replace <!-- drop down will be here --> with the following code.

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</li>

Our output shows a drop down on the Navbar. Cool!

8.0 Add a search form

On index.html file, replace <!-- search form will be here --> with the following code.

<form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button>
</form>

Output shows an input box and a search button on the upper right side corner of our page.

9.0 Add content container

A Bootstrap Container is required to make our web page responsive.

On index.html file, replace <!-- container will be here --> with the following code.

<div class="container mt-5">
    <!-- heading will be here -->
    <!-- alert will be here -->
    <!-- table will be here -->
</div>

You can replace the class container with a container-fluid if you want the container to have a full width.

Nothing has changed on our output. But if you will view the source, you can see the div tag with container class.

10.0 Add a heading

A Bootstrap Heading is important because it tells the user what page he was in.

On index.html file, replace <!-- heading will be here --> with the following code.

<div class="row">
    <div class="col-sm">
        <h1>Bootstrap Sample Page with Form</h1>
    </div>
</div>

As you may have noticed, we used a div tag with a row and then col-sm class. This class enables the Bootstrap Grid System. Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Output shows our heading.

11.0 Add a table

Our Bootstrap Table will hold form elements like a text box. The Bootstrap table looks good and has hover effects as well.

On index.html file, replace <!-- table will be here --> with the following code.

<div class="row">
    <div class="col-sm">
         
        <table class='table table-hover'>
 
            <tr>
                <td>Name</td>
                <td></td>
            </tr>
 
            <tr>
                <td>Contact Number</td>
                <td></td>
            </tr>
 
            <tr>
                <td>Address</td>
                <td></td>
            </tr>
 
            <tr>
                <td>List</td>
                <td></td>
            </tr>
 
            <tr>
                <td></td>
                <td></td>
            </tr>
 
        </table>
             
    </div>
</div>

Our output shows a table with a few information.

12.0 Add form elements to a table

Our Bootstrap Form example will have a few text boxes, a text area, a select drop-down list and a submit button.

On index.html file, remove the code from opening <table> tag to closing </table> table. Replace it with the following code.

<form action='#' method='post'>
    <table class='table table-hover'>
 
        <tr>
            <td>Name</td>
            <td><input type='text' name='name' class='form-control' required></td>
        </tr>
 
        <tr>
            <td>Contact Number</td>
            <td><input type='text' name='contact_number' class='form-control' required></td>
        </tr>
 
        <tr>
            <td>Address</td>
            <td><textarea name='address' class='form-control'></textarea></td>
        </tr>
 
        <tr>
            <td>List</td>
            <td>
                <select name='list_id' class='form-control'>
                    <option value='1'>List One</option>
                    <option value='2'>List Two</option>
                    <option value='3'>List Three</option>
                </select>
            </td>
        </tr>
 
        <tr>
            <td></td>
            <td>
                <button type="submit" class="btn btn-primary">
                    <span class="glyphicon glyphicon-plus"></span> Submit
                </button>
            </td>
        </tr>
 
    </table>
</form>

Our output shows our HTML form.

13.0 Add an alert message

Bootstrap Alerts are a nice way to get your user's attention. Here's how to add a good looking alert message.

On index.html file, replace <!-- alert will be here --> with the following code.

<div class="row">
    <div class="col-sm">
        <div class="alert alert-success">
            <strong>Good day!</strong> This is an example alert. Visit <a href="https://codeofaninja.com/" target="_blank">codeofaninja.com</a>!
        </div>
    </div>
</div>

Output below shows an alert message.

To change alert colors, you may replace alert-success with alert-info, alert-danger or alert-warning.

14.0 Bootstrap Online Resources

15.0 What's Next?

Up Next: Learn jQuery Tutorial for Beginners – Step By Step Guide!

16.0 Related Tutorials

17.0 Some Notes

#1 Found An Issue?

If you found a problem with this code, please write a comment below. Please be descriptive about your issue. Please provide the error messages, screenshots (or screencast) and your test URL. Thanks!

Before you write a comment, remember to read this guide and our code of conduct.

#2 Become a true Ninja!

We constantly add new tutorials and improve our existing tutorials and source codes. Be one of the first to know an update by subscribing to our FREE newsletter. CLICK HERE TO SUBSCRIBE FOR FREE!

#3 Thank You!

If you have a friend who need help and is getting started to learn Bootstrap, please share this article with them.

Is there anything else I can do to improve this post? Please share your thoughts on the comments section below.

Thanks for reading our bootstrap tutorial for beginners!

jQuery Tutorial for Beginners – Step By Step Guide!

jquery-step-by-step-tutorial-for-beginners

Previously, we learned how to use Bootstrap to make our web applications look good. This time, we will learn how to use jQuery.

Many of you asked me how to use jQuery. This tutorial is my answer to you. I want to give you links but I feel like it's easier to teach someone about something that is your own version of work! We hope you guys will find this step by step guide useful.

Contents of this tutorial include:
1.0 Getting Started with jQuery
2.0 Run jQuery in 5 Easy Steps
3.0 Download Source Code
4.0 jQuery Basic Concepts
5.0 Online Resources
6.0 What's Next?
7.0 Related Tutorials
8.0 Some Notes

1.0 Getting Started with jQuery

1.1 What is jQuery? Okay here’s the simplest definition I can give. jQuery is a JavaScript library. It can:

  1. Make your JavaScript code shorter, faster and cross browser.
  2. Manipulate your HTML, like showing or hiding something from the page.
  3. Handles events – it can do something when a user click a button or any other activity a user can do with a mouse.
  4. Animation – for example make a part of your page fade in, fade out or just simply make something move.
  5. AJAX – do a server request without refreshing your whole web page.

1.2 This post. I assume you already know basic HTML, CSS and JavaScript. In this post, aside from the simple definition of jQuery above, we are just going to have two parts:

  1. The super straightforward, step by step tutorial or guide in running a very basic jQuery script. (2.0)
  2. We are going to take a look more of the jQuery basic concepts, as shown in #1 (3.0)

2.0 Run jQuery in 5 Easy Steps

2.1 Follow the steps below – these steps will lead you to run a very basic jQuery script that does a slide and toggle.

Step 1: Create HTML page with its basic structure.

<!-- step 1 -->
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Tutorial for Beginners</title>
</head>
<body>

</body>
</html>

Step 2: Add element to be clicked. We’re gonna have a button in this example, we added an ID name to this button called myButton. Add the following code inside the "body" tag.

<!-- step 2 -->
<button id='myButton'>Click to Slide or Toggle</button>

Step 3: Add the element to be shown or hidden. We’re gonna have a "p" tag with bunch of sample words inside. Add the following code below step 2′s code.

<!-- step 3 -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.
</p>

Step 4: Add the jQuery library. Aren’t you excited? You can also download your own copy of jQuery but in today’s example, we’ll be linking to Google’s copy of jQuery. Add the following code below step 3′s code.

<!-- step 4 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

Step 5: Add jQuery script. This script will show or hide the "p" tag and the words inside it. Notice that we selected the button by referencing our button’s ID myButton.

<!-- step 5 -->
<script>
$("#myButton").click(function () {
    $("p").slideToggle("slow");
});
</script>

3.0 Download Source Codes

You can download all the code used in this tutorial for only $9.99 $5.55!

Congratulations! You are now a jQuery coder! Just kidding. Not yet. But don’t lose hope!

To achieve being a real jQuery coder, like any other skill, it must be practiced and be well versed with its concepts. So continue to read below and make your jQuery wisdom a little bit better.

4.0 jQuery Basic Concepts

4.1 Run jQuery when DOM is ready. We didn’t implement this in our example above because I want to give you a quick look on how to run a jQuery script and it is a very small web page anyway.

But in reality, if you use jQuery in larger web pages, you have to run it when the DOM is ready. Here’s how:

$(document).ready(function() {
    // jQuery will run once everthing else in your web page is already loaded.
    // All your jQuery codes here.
});

4.2 How to Select an Element in jQuery? Learning jQuery selectors are very important because you’re dealing with HTML elements within your web page.

I’m gonna give you some of the most basic selectors being used:

// selects 'only one' HTML element with ID "myButton", such as our example above
// notice that we use hashes (#) for ids, like that of CSS
$("#myButton");

// selects all HTML elements with class "myClass", for instance: <div class='myClass'></div>
// notice that we used dots (.) for classes, like that of CSS
$(".myClass");

// selects all button HTML element, for example: <button>Click Me!</button>
$("button");

// selects all div element, example: <div>Me and all other div will be selected!</div>
$("div");

// selects all anchor link element, for example: <a href="https://codeofaninja.com/">Me and all other 'a' tags will be selected!</a>
$("a");

Learn more jQuery Selectors

4.3 jQuery Events. In our example above (2.0), we use a click event, in jQuery it was represented by the click() method. Here are some more jQuery events that you might find useful:

$("button").click(function(){
    // do something when user click the button
});

$("form").submit(function(){
    // do something when user submits a form
});

$("#myDiv").hover(function(){
    // do something when user hover an HTML element
});

$("#myTextbox").keyup(function(){
    // do something when user types on a textbox with ID myTextbox
});

Learn more jQuery Events

4.4 Animation Effects with jQuery. On our example above (2.0), the animation effect we used is the slideToggle(). Here are some other animations that you can do with jQuery:

// slide or toggle animation with a <p> tag
// you can change 'slow' to 'fast' or any number in milliseconds
$("p").slideToggle("slow");

$("p").slideToggle(1000, function() {  
    // do something when slide up or down animation is done
});

// hide the matched elements with a sliding motion.
$( "#book" ).slideUp( "slow", function() {
    // animation complete
});

// display or hide the matched elements by animating their opacity.
$( "#book" ).fadeToggle( "fast", function() {
    // animation complete
});

Learn more jQuery Animation Effect

Remember that the examples above are just some of the basics. Continue to practice, search and learn more in the process. And as always, thanks for reading!

5.0 Online Resources

6.0 What's Next?

Learn jQuery UI Tutorial for Beginners - Learn how to use date picker and other user interface interactions, effects, widgets, and themes built on top of the jQuery.

7.0 Related Tutorials

8.0 Some Notes

#1 Found An Issue?

If you found a problem with this code, please write a comment below. Please be descriptive about your issue. Please provide the error messages, screenshots (or screencast) and your test URL. Thanks!

Before you write a comment, remember to read this guide and our code of conduct.

#2 Become a true Ninja!

We constantly add new tutorials and improve our existing tutorials and source codes. Be one of the first to know an update by subscribing to our FREE newsletter. CLICK HERE TO SUBSCRIBE FOR FREE!

#3 Thank You!

Thank you for learning with our jQuery Tutorial for Beginners! Please share this tutorial to one of your friends if you have time.

jQuery UI Tutorial for Beginners – Your Step by Step Guide!

jquery-ui-tutorial-for-beginners

Previously, we learned how to use jQuery to add some interactivity to our web pages. This time, are you getting started with jQuery UI? You've come to the right place!

This step by step tutorial aims to give you a head start in using jQuery UI. You probably know what jQuery is so you want to take a beautiful step forward with jQuery UI, and that's awesome!

jQuery UI jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is a perfect choice.

For me, Bootstrap and jQuery UI look good together. It also allows us to choose from different themes available, you can even create your own theme! But this post only covers running a very simple jQuery UI script in your web browser.

Contents of this post include:

1.0 Run jQuery UI in 6 Easy Steps
2.0 jQuery UI Sample Codes
3.0 Download Source Codes
4.0 Online Resources
5.0 What’s Next?
6.0 Related Tutorials
7.0 Some Notes

1.0 Run jQuery UI in 6 Easy Steps

The following steps below will make an awesome date picker with jQuery UI. Let's code!

Step 1: Prepare your HTML file with just its basic structure.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        
    </head>
<body>

</body>
</html>

Step 2: Add a text box inside the tag. User will be able to click this and show a jQuery UI calendar picker later.

<input type="text" id="myDatepicker" placeholder="Click to pick date" />

Step 3: Add the jQuery library before the ending tag. This is because jQuery UI is built on top of jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Step 4: Add the jQuery UI library under the code of step 3. This is actually the first step in enabling jQuery UI in your page.

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Step 5: Add jQuery UI theme via CSS external link, put it inside the tag, after the tag. This CSS will make our UI stylish.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" />

Step 6: Enable jQuery UI date picker to our text box on Step 1. Add the following code under the code of step 5. This is how you make a simple text box to an awesome jQuery UI date picker.

<script>
$( "#myDatepicker" ).datepicker();
</script>

Quick Tip: Always use the minified version. For instance, use jquery-ui.min.css instead of just jquery-ui.css

Continue to read below, you will see the complete code of the steps above.

2.0 jQuery UI Sample Codes

You will have to click the text box saying "Click to pick a date" to see jQuery UI with different themes in action.

By the way, examples 2.1 and 2.2 uses Google's content delivery network to run jQuery UI, meaning you won't have to download the jQuery and jQuery UI library, you just have to include it.


2.1 jQuery UI with Smoothness theme hosted in Google CDN.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Tutorial for Beginners - smoothness theme - by codeofaninja.com</title>
        
        <!-- step 4 - include you jquery ui theme -->
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" />
        
    </head>
<body>

<!-- step 1 -->
<input type="text" id="myDatepicker" placeholder="Click to pick date" />

<!-- step 2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- step 3 -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script>
/* step 5 */
$( "#myDatepicker" ).datepicker();
</script>

</body>
</html>

2.2 jQuery UI with Vader theme hosted by Google too.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Tutorial for Beginners - vader theme - by codeofaninja.com</title>
        
        <!-- step 4 - include you jquery ui theme -->
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/vader/jquery-ui.min.css" />
        
    </head>
<body>

<!-- step 1 -->
<input type="text" id="myDatepicker" placeholder="Click to pick date" />

<!-- step 2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- step 3 -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script>
/* step 5 */
$( "#myDatepicker" ).datepicker();
</script>

</body>
</html>

2.3 What if I don't want a CDN? I want to host my own jQuery UI library? No problem, you can always go to the jQuery UI download builder, you just have to select your preferred theme using the dropdown at the lower part of the page.

jquery ui download builder

jQuery UI library is self hosted in the example code below.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Tutorial for Beginners - vader theme - by codeofaninja.com</title>
        
        <!-- step 4 - include you jquery ui theme -->
        <link rel="stylesheet" href="jquery-ui-1.10.3.custom/css/le-frog/jquery-ui-1.10.3.custom.min.css" />
        
    </head>
<body>

<!-- step 1 -->
<input type="text" id="myDatepicker" placeholder="Click to pick date" />

<!-- step 2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- step 3 -->
<script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>

<script>
/* step 5 */
$( "#myDatepicker" ).datepicker();
</script>

</body>
</html>

3.0 Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

4.0 Online Resources

Want to see more of jQuery UI? You can always visit:

5.0 What's Next?

Up Next: Learn PHP and MySQL CRUD Tutorial for Beginners - build a simple web application with PHP and MySQL database.

6.0 Related Tutorials

7.0 Some Notes

#1 Found An Issue?

If you found a problem with this code, please write a comment below. Please be descriptive about your issue. Please provide the error messages, screenshots (or screencast) and your test URL. Thanks!

Before you write a comment, remember to read this guide and our code of conduct.

#2 Become a true Ninja!

We constantly add new tutorials and improve our existing tutorials and source codes. Be one of the first to know an update by subscribing to our FREE newsletter. CLICK HERE TO SUBSCRIBE FOR FREE!

#3 Thank You!

Thanks for reading our jQuery UI tutorial for beginners!

How to Run a PHP Script? Step By Step Guide!


Hello and welcome to the start of codeofaninja.com's series of web development articles!

Contents of this post include:

1.0 Overview
2.0 Install XAMPP

3.0 Run Your First PHP Script
3.1 Go to XAMPP server directory
3.2 Create hello.php
3.3 Code inside hello.php
3.4 Open New Tab
3.5 Load hello.php
3.6 Output

4.0 Manage Database with PhpMyAdmin
4.1 Create a Database
4.2 Create a Table
4.2 Insert Data
4.4 Useful Videos

5.0 Run PHP Script with Database
5.1 Go to XAMPP server directory
5.2 Create read_one.php
5.3 Code Inside read_one.php
5.4 Open Your Browser
5.5 Load read_one.php
5.6 Output

6.0 Online Resources
7.0 What's Next?
8.0 Related Tutorials
9.0 Some Notes

1.0 Overview

Setting up a development environment for PHP programming is easy. Download the code editor you prefer, I personally like atom.io text editor.

Next is to install XAMPP, the most popular PHP development environment. This package contains Apache, PHP & MariaDB or MySQL database applications.

Many people emailed me with a main question: Mike, how to run a PHP script? This post is my answer to you guys and to those people who will need this in the future.

In the following tutorial, we will learn how to install XAMPP, how to run a PHP script, manage database with PhpMyAdmin and run a sample PHP script that fetches a record from the database.

2.0 Install XAMPP

Go to this link and download XAMPP for your operating system. XAMPP is available for Windows, Linux or Mac.

Here's a video about how you can install and use XAMPP.

3.0 Run Your First PHP Script

The following is an example about how to run a PHP script. What this program does is show a "Hello World!" text on the screen or webpage.

3.1 Go to XAMPP server directory

I'm using Windows, so my root server directory is "C:\xampp\htdocs\".

3.2 Create hello.php

Create a file and name it "hello.php"

3.3 Code Inside hello.php

Open hello.php and put the following code.

<?php
echo "Hello World!";
?>

3.4 Open New Tab

Run it by opening a new tab in your browser

3.5 Load hello.php

On you browser window, type http://localhost/hello.php

3.6 Output

You should see the following output.
run-php-script-1
Great job, you just run a PHP script!

4.0 Manage MySQL with PhpMyAdmin

MySQL is an open-source relational database management system (RDBMS). MySQL is a popular choice of database for use in web applications.

phpMyAdmin is a free and open source tool written in PHP intended to handle the administration of MySQL with the use of a web browser. In the following examples, we will see how easy we can handle MySQL with PhpMyAdmin.

4.1 Create a Database

  1. Go to http://localhost/phpmyadmin/
  2. Click the "New" link on the upper left corner (under recent tables)
  3. Fill out the "Database Name" field with "my_first_database".
  4. Click the "Create" button

1-create-first-database

4.2 Create a Table

  1. Click "my_first_database" on the left side of the screen
  2. On the "Create Table" section, fill out the Name with "products" and Number of Columns with "6"
  3. Click "Go" button

2-create-table

  1. Fill out the fields with id, name, etc.
  2. Mimic everything in the following image
  3. Click the "Save" button

3-create-fields-of-table

4.3 Insert Data

Click the "products" table.

4-click-table-to-insert-data

Click the "Insert" tab.

5-click-table-to-insert-data-2

Fill out the form, mimic the data on the following image. Click the "Go" button.

6-fill-out-form-to-insert-data

Great job! We now have a database, a table inside the database and a record inside the table.

7-data-was-inserted

4.4 Useful Videos

1. Create a database and import MySQL file.

2. Create a database and create table.

5.0 Run PHP Script with Database

In the following steps, we will run a PHP script that fetches one record from the MySQL database.

5.1 Go to XAMPP server directory

Go to your "C:\xampp\htdocs\" directory

5.2 Create read_one.php

Create a file and name it "read_one.php"

5.3 Code Inside read_one.php

The numbers 1-8 in the following code are called "code comments". It explains each part of our simple code below. Open read_one.php and put the following code.

<?php 
// 1. database credentials
$host = "localhost";
$db_name = "my_first_database";
$username = "root";
$password = "";

// 2. connect to database
$con = new PDO("mysql:host={$host};dbname={$db_name}", $username, $password);

// 3. prepare select query
$query = "SELECT id, name, description, price FROM products WHERE id = ? LIMIT 0,1";
$stmt = $con->prepare( $query );

// 4. sample product ID
$product_id=1;

// 5. this is the first question mark in the query
$stmt->bindParam(1, $product_id);

// 6. execute our query
$stmt->execute();

// 7. store retrieved row to the 'row' variable
$row = $stmt->fetch(PDO::FETCH_ASSOC);

// 8. show data to user
echo "<div>Name: " . $row['name'] . "</div>";
echo "<div>Description: " . $row['description'] . "</div>";
echo "<div>Price: $" . $row['price'] . "</div>";
?>

5.4 Open Your Browser

Run it by opening you your browser

5.5 Load read_one.php

On you browser window, type http://localhost/read_one.php

5.6 Output

You should see the following output.
run-php-script-2
Awesome! You are now ready to learn more about web programming and development.

6.0 Online Resources

Here in codeofaninja.com, we want to simplify learning for you to actually build something. But it is also important for you to read and study more. The following are my suggestions where to learn more.

You can always go back to the list above while you go along our series of web programming tutorials.

7.0 What's Next?

Learn our JavaScript tutorial for beginners.

8.0 Related Tutorials

9.0 Some Notes

#1 Found An Issue?

If you found a problem with this code, please write a comment below. Please be descriptive about your issue. Please provide the error messages, screenshots (or screencast) and your test URL. Thanks!

Before you write a comment, remember to read this guide and our code of conduct.

#2 Become a true Ninja!

We constantly add new tutorials and improve our existing tutorials and source codes. Be one of the first to know an update by subscribing to our FREE newsletter. CLICK HERE TO SUBSCRIBE FOR FREE!

#3 Thank You!

Please share this post if you think this is a useful tutorial about how to run a PHP script. Thanks for learning here in codeofaninja.com!