Bootstrap Tutorial for Beginners – Step by Step Guide!

bootstrap-tutorial-beginners-step-step

Bootstrap is a very useful front-end framework for faster and easier web development. You won’t have to worry about having a decent user interface when you use it.

I personally love this framework because I’m not into designing web app user interfaces, it solves a pain in me. That is why I made this Bootstrap tutorial for beginners.

In fact, you can see my download and online tools sites. They are using Bootstrap.

We are using Bootstrap for web application tutorials as well. One example is our PHP, MySQL and OOP CRUD Tutorial – Step By Step Guide!

Here are some good looking websites or web apps built with the help of bootstrap: http://expo.getbootstrap.com

Just a little history, Bootstrap is created in twitter, it was called Twitter Bootstrap to streamline their development. Thanks to these people, the framework is still in active development.

This Bootstrap tutorial for beginners will cover the following:

Read more

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 Live Demo</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!

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

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?

Up Next: You have two choices.

a. Learn PHP and MySQL CRUD Tutorial for Beginners – build a simple web application with PHP and MySQL database. Or,

b. 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, we can solve it faster via Email or FB message, please send me a message via email mike@codeofaninja.com, or via our official Facebook page!

Please be more detailed about your issue. Best if you can provide an error message and your test or page URL. Thanks!

Please feel free to comment if you have any questions, suggestions, found something wrong or want to contribute to this code.

#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. Get a FREE EBOOK as well. 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 the 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 and Live Demos
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 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 and Live Demos

In the demo page, you have to click the text box saying “Click to pick 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!

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

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, we can solve it faster via Email or FB message, please send me a message via email mike@codeofaninja.com, or via our official Facebook page!

Please be more detailed about your issue. Best if you can provide an error message and your test or page URL. Thanks!

Please feel free to comment if you have any questions, suggestions, found something wrong or want to contribute to this code.

#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. Get a FREE EBOOK as well. 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 Insie 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 Insie 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?

Today we have learned how to run a PHP script.

Before we learn more of PHP & MySQL programming, let us learn how to use a front-end framework that will beautify the user-interface of simple applications that we will build.

Up next: Learn Bootstrap Tutorial for Beginners

8.0 Related Tutorials

9.0 Some Notes

#1 Found An Issue?

If you found a problem with this code, we can solve it faster via Email or FB message, please send me a message via email mike@codeofaninja.com, or via our official Facebook page!

Please be more detailed about your issue. Best if you can provide an error message and your test or page URL. Thanks!

Please feel free to comment if you have any questions, suggestions, found something wrong or want to contribute to this code.

#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. Get a FREE EBOOK as well. 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!