Pratika Agnihotri MySQL

Let’s Start MySQL

MySQL is a Relational Data Base Management System (RDBMS). You may be thinking what is the difference between RDBMS and DBMS. Let me answer this –

RDBMS is, actually, a database in which data is stored in tabular form and these tables are linked together for better access, storage and manipulation of data. These usually have a Primary Key (a unique value of every record is declared as primary key).
In DBMS, data is stored in file format. It has one parent node and zero, one or more child nodes. It can be stored in graph form also.

And we have to study only about RDBMS. It’s easy…

In a database, data is stored in tables in an organized form. And inside the tables, each record is stored in rows. One record in one row. By record I mean to say full information of any entity. For example – if I want to store Name, Author, Ratings of five books, I will do this in five rows. How? I will, first, create a table in a database. Within that table I will draw five rows(for five books) with three columns in it (one for Name, one for Author, and last one for Ratings) . It’s just like a common table we usually make. And remember whatever commands we give inside database, we do it through queries, and MySQL understands Structured Query Language. These queries are of SQL. Thus we can say we use SQL to execute queries in MySQL.

Let’s do it practically, but for this there are some requirements. The easiest one is to install a server(wamp or xamp). As soon as you will activate it click on MySQL and then on MySQL console. I haven’t described the installation process, I think you can do that. After this you will get a console window, press enter when it asks for password. If you want to confirm that everything is working fine, write use databases ; after mysql prompt.

Now, we will implement the same example of ‘books’ which we discussed above. Follow the steps as I do, things will be easier-

For creating a table, first we need to create a database and name it. Remember one more thing that we do not create different databases for different tables. A database can have many many tables. We create our own database just to name a location where our data, be it of books or students or any library or any organization, could be stored. Getting? If not then write your doubt in comments. Now, lets execute our queries –

queries to create a database, create a table, and to show description of table

In the above image-

  • The query to create a database is – create database myproject; I have taken the name of my database as myproject, you may take of your choice.
  • In order to use that database the query is – use myproject. Now we can formally create our table.
  • To create a table, the query is – create table books_info(Name varchar(30), Author varchar(30), Ratings int); In above query table_info is the name of my table (you may take whatever you want) and inside the parentheses we pass the names of columns in which we want to store data, we also pass the datatype of that column (for string ‘varchar’ is used, for integers ‘int’ is used, for any date ‘date’ is used) and the maximum size which could be used to store that data. I have taken size as 30 each for Name and Author, for int no size is required.
  • Now if you want to take a look at your table information you may use this this query – desc books_info;

Remember that even a small mistake may spoil your result. So be careful. In case you face some error and you are tired of typing the same query again and again, use upward arrow key to retain your previous queries. Keep pressing that key until you get the required key, make the required changes and execute it again.

Till now we have created just the structure of our table, we haven’t stored any data in it. For storing data, see the queries used in image below-

query to store data in table

In above image, the first line I have written is the query to store information of a book in the table. In this query, inside the first parentheses we write those column names in which we want to store data. I wanted to store data in all three columns so I have written all the three column names (Name, Author, Ratings), you may also chose all the three columns or any two or even one. In the next value() parentheses, we give value to those columns which we mentioned in our first parentheses and in the same sequence. Remember that all strings and date should be within single quotes.

After writing this query if you want to see whole data of your table, use query – select * from books_info; But if you want to see the data of any one or two column, write the query as – select Author from books_info; In this query I have stated only one column name, if you want to display the data of two columns, write query as – select Name, Author from books_info; . In these queries if anything is unclear please write your doubt in comments section.

So, we have successfully stored the information of a book ; remember we decided to store the information of five books. So for storing the data of second book, press upward arrow key from your keyboard. Keep pressing the key slowly until you get your original query (which you used to store information of first book). When it is retained, press right or left arrow key or delete or backspace key (as required) to store new data for second book. You can repeat the same process to store the data of five books.

Look I have done the same and got following table –

There are many other queries but we will execute them whenever we will need them. Right now I want to change the name of my column name from ‘Name’ to ‘Book_Name’. For this following query is used –

alter table books_info Name Book_Name varchar(25); Here I have reduced the size also from 30 to 25 and datatype will remain same – varchar.

Look now my table looks meaningful-

That’s it… But there is more to come.

Have ERROR FREE coding!

Pratika Agnihotri event handling

Event Handling 2

Previously, we coded in PHP to check if the user is verified or not and we did this by matching his user name and password with our pre-declared user name and password.

Now we will expand this verification to three users. Yes, if any of those three users logins with their respective name and password, they will be successfully logged in. So, our HTML login page will be same that we created earlier – 


<html>

<head>
	<title>Untitled 1</title>
</head>
<body text="maroon">
  <form action="firstand lastname.php" method="post" name="myform">

    <table border="5" bordercolor="darkslategray" align="center" width="400px" >
      <tr><td>UserID</td><td><input type="text" name="uid"></td>
      <tr><td>PASSWORD</td><td><input type="password" name="pwd"></td>
      <tr><td align="center" colspan="2"><input type="submit"
       value="LOGIN" name="submit"></td></tr>
   </table>
 </form>

</body>
</html>

Now we have to think a logic to display the message. I have derived the following logic yours might be different.

<?php
 $user = array("Randy Orton", "Lesnar", "Roman Reigns");
 $passwd = array("randy", "lesnar", "reigns");

 $count= 0 ;
 $nm = " ";
 extract($_POST);
 if (isset($submit))
 {
   for($i=0 ; $i<3 ; $i++)
   {
     if (strcmp($user[$i],$uid)==0 && strcmp($passwd[$i],$pwd)==0)
     {
       $count=1;
       $nm = $uid ;
       break;
     }
   }
  if($count==1)
    echo "Welcome $nm, You are successfully logged in.";
  else
    echo "Invalid Username or Password";
 }
?>

Remember that it is not compulsory to make two different files. We can embed both the codes in one single PHP file store it in www and run it. But it is better to keep your designing part and logic part separate in HTML and PHP files respectively.

That’s it.

Have ERROR FREE coding!

Pratika Agnihotri event handling, HTML, PHP

Event Handling

Let’s create a simple web page where a user will give his first and last name and we’ll display his full name (by concatenating first and last name) in some other web page.

So we’ll make two files – one HTML file and one PHP file. HTML file will be for designing the layout where user will enter his first and last name and PHP file will be for generating logic to display his full name at once.

The HTML file I have designed is something like below – 

<html>
  <head>
    <title>FIRST AND LAST</title>
  </head>
  <body text="darkgreen">
    <br><br><br>

    <form name="myform" action="firstand lastname.php" method="post">
    <fieldset>
      <legend>USER INFO</legend>
      <table>
        <tr>   <td>First Name</td><td><input type="text" name="first"></td>     </tr>
        <tr>   <td>Last Name</td><td><input type="text" name="last"></td>      </tr>
        <tr>   <td><input type="submit" name="submit" value="SUBMIT"></td>    </tr>
      </table>
    </fieldset>
    </form>
  </body>
</html>

Please take note of this that whenever we place any submit button in form, it is compulsory to use <form> tag. So in above code inside <form> tag I have used action=” “ . In action I have given the name of my php file which contains logic to display full name. You may give name of your PHP file inside action. So the PHP code I wrote in my PHP file is-

In PHP code, I have first extracted the keys into variables. (Actually the keys are the name which we give inside <input> tag in HTML file. You may check this using var_dump($_POST)) .

So converting keys into variables allows us to handle them as normal variables in PHP. Using isset($submit) tells us whether SUBMIT button is pressed or not. (submit is the name of my SUBMIT button in my HTML code, if you have given some other name use that name) . If SUBMIT is pressed then the first and last name will be concatenated with a space in between. And we will simply echo this. ($first and $last are my name which I have given to first and last name respectively in my html code, yours might be different so use that)

Save both your PHP and HTML file in Documents Tool Folder (www) and run your HTML file (not PHP).

That’s it.

Have ERROR FREE coding!

Pratika Agnihotri HTML, PHP

How to read values from HTML file in PHP file

Remember we created a form in HTML, we entered our details and those details were clearly visible in URL. But if we use method="post"inside <form> tag in our HTML file, our details will not be visible. And recall how we used action attribute to send/post the details to some other page, and this page could be any HTML or PHP file. Also remember that whenever you want the user to submit his/her details by pressing a submit button, it is necessary to use form tag.

So here we’ll read those details in PHP file. When we coded that form in HTML file, we used <input> tag and inside it we used attributes/property like type and name. Type was used to specify the type of value the applicant should enter – text, email, password, file, image, color, date, etc. And the name given to name property is used as a key to access the details entered by the applicant in respective fields. So with the help of this KEY only we are going to read the values. This is known as EVENT HANDLING.

So first we’ll make a new PHP file. In that file we have, actually, two ways to read values.

First way

Open PHP file, and type following code and save the file- 

<?php
    var_dump($_POST);
    
?>

$_POST and $_GET are known as Super Global Variables.

But, but, but…first, open your form which we designed in HTML and make some changes there in coding. Look there you must have opened <form> tag and inside that you must have written name= ” ” , method=” ” and action=” “. Right.

  • In name you can give any value that doesn’t matters, in method you should write either method=”post” or “get” .I am considering that you are aware of meaning of both of these. In action, we write the name of that file where we want to post the information submitted by applicant.
  • So, the above PHP code which I have written, you type it save it with extension .php.
  • The name which you are giving to this PHP file is important. Why important? Because we want the data to be displayed in this PHP file only, so quickly go back to your HTML code (code where we designed the complete form), inside the <form> tag, in action= ” “ , between the double quotes type the name of your PHP file, which you just saved. Done!
  • And before running your this HTML file, note that if you have written method=”post” inside <form> tag, then above PHP code which I have written is valid but if you have written method=”get”, then you need to make just a small change in above PHP code, write var_dump($_GET). That’s it !
  • You can now safely run your HTML file (not PHP file because you created PHP file just to get the information filled by user in the form and that form is designed in HTML file).
  • Fill the details and click on submit button.
  • You will get an output displaying all the information. You need to look carefully and understand the format of output, it will help in displaying individual values in PHP. Got it!

Now you must have got that the output we are getting is in the form of Associative Arrays. Why Associative Arrays? Because, look carefully, the names which we assigned in our HTML file inside the <input> tag are now acting like keys…Yes ! Now it will be quite easy to access the values associated with those keys.

So again quickly jump to your PHP code and add some lines- 

<?php
    var_dump($_POST);

    echo $_POST['mob']."<br>";
    echo $_POST['fname']."<br>";
    echo $_POST['mname']."<br>";
    
?>

I have printed just three values, you may print all your values through the value of name which you gave in your HTML file. But printing individual values in this way is tiring.

So, let’s understand the second way to print values.

Second WAY

This is easy. Believe me. As we saw that the output we get after submitting our form is stored in associative array (key-value pair). We have an excellent in-built function extract(). It does all the job for us. Look at following code first – 

<?php
    extract($_POST);

    echo $mob."<br>";
    echo $fname."<br>";
    echo $mname;

?>

We know, that $_POST or $_GET is an associative array name which has key-value pairs. So what extract() function does is- it converts keys into variables. And when keys are converted into variables we can simply print them through echo. This is simpler than previous method.

While displaying values you may face problem in printing the values of radio buttons and checkboxes. So let’s solve that. Open your ‘form’ code which, of course, you must have saved in some HTML file. There in gender you must have used two input tags (one for male other for female) with type=”radio”. Inside both input tags use two more properties- name property and value property. Carefully, give same name in name property in both input tags. While in value property, write value=”Male” in male input tag and value=”female” in female input tag. Now, run the output fill the form click on submit and you will surely get the right gender. And if you are not getting, then please share your problem here in comments so that I may help.

In case of checkboxes, the name which we give in the name property inside <input> tag should be an array and you should write some value in value property also. Let me explain with one example below-

<input type= "checkbox" name="chk[]" value="Reading blogs">Reading Blogs
<input type= "checkbox" name="chk[]" value="Net Surfing">Net surfing
<input type= "checkbox" name="chk[]" value="Programming">Programming
<input type= "checkbox" name="chk[]" value="Travelling">Travelling

I expect you must have got some idea how to do it. I haven’t taken any row or column, I have just given an idea of “hobbies” how you should write inside input tag. You must write this inside some row. I randomly picked some line.

I am telling to run HTML file and not PHP file and I have, above, given a valid reason also why to do so. But what if you run your PHP file without running your HTML file, of course errors will come. But if you make sure that PHP file should run only if user presses SUBMIT button in his/her form, then no error will be displayed. We’ll just do a little coding in our PHP file for this.

We have learnt that we first convert all the keys into variables through extract(). Right. To check if an applicant has pressed the SUBMIT button, we use isset($var_name).

So when an applicant presses SUBMIT in the form, the name in name property inside <input> tag is SET or ON. Coming back to our PHP code, after extracting values if the user would have pressed SUBMIT, then the name which i have taken “subBtn” would be ON or SET. Now, if I pass the name of name inside if (isset($subBtn)) then the condition will be true. Why True? Because $subBtn has now become a variable after being extracted through extract(). And when I am saying that an applicant has pressed SUBMIT button that means subBtn is ON or SET or TRUE. And so the block inside if(isset($subBtn)) will surely run. You can print all your values inside if block. And if an applicant would not have pressed SUBMIT then subBtn will be UNSET or OFF or FALSE, so the block inside if you will not run and so you will not get any error.

I have tried to explain this in most plain words, but if there is some problem please ask…That’s your HUMAN RIGHT 🙂

Doing just this much is not at all enough. We’ll do 2 more things for practice in event handling-

1- We’ll go to our calculator, and print the result there itself in result box. Click here.

2- we’ll create a login page and check if user is valid or not. Click here.

THAT’S ALL ! Please follow this blog so that you may get updates of the latest posts.

Have ERROR FREE coding.

Pratika Agnihotri PHP

Some Important String Functions in PHP

I have just finished watching Amitabh Bachchan’s 3 hr film- ‘Muqaddar ka Sikander’. It has some beautiful songs. But you know, the whole film was like full of dialogues, statements and even songs too were statements i.e everything is in STRING. Thus, STRINGs are of great use everywhere. The data submitted by user is mostly in strings and we’ll have to operate upon those strings. So for this, we have some predefined functions and PHP offers them free of cost. 🙂

Before moving to functions let’s work on some basic tips.

  • To print a statement in PHP, we use echo. Right. We know this. But there is a difference in printing any statement using double quotes and printing a statement using single quotes. Let me show you-
<?php
$ques1 = "Who will be the next IMF Chief?";
$ques2 = "Who will now head Bank of England?" ;

echo 'My first question is:: $ques2'. "<br>";
echo "My second question is:: $ques1" ;

?>

In line 5th I have used single quotes so in its output the value of $ques2 will not be replaced. Whereas in line 6th, $ques1 will be replaced by its value. So the output will be-

My first question is:: $quest2
My second question is:: Who will be the next IMF Chief?

Got it ! So its better to use double quotes.

You must have learnt of escape sequences earlier. Let me just brief it. Escape sequences begin with ‘\’ and are used to give some special meaning to a character (not all characters) like- ‘\n'(to transfer control to new line) or ‘\t'(tab space) or ‘\f'(formfeed) or ‘\a'(a beep sound), you must have studied all this.

Apart from this, escape sequences are also used to remove the speciality of special characters. When we print some statement using echo, we use double quotes most of the time. Suppose we want to print double quotes, then? Look at following code- 

<?php
$ques1 = "Who will be the next IMF Chief?";


echo "My first question is:: \"$ques1\" " ;


?>

In above code, double quotes are special character because they represent string. That’s why inside echo–

  • I have first used double quotes- to tell PHP that we are printing some string
  • then I have written my string “My first string is::”
  • then look carefully, I have used – \” . This is done to tell PHP that it should neglect the meaning of double quotes, which is to begin or end the string. So when its actual meaning is neglected, double quotes gets printed just as any normal character.
  • So in order to print double or single quotes, simply use \ . Try the code by yourself, make some changes and analyze the result by yourself.
  • We can even print this \ by writing – echo "Today Indians should be \\proud\\ of their scientists at \" ISRO \" " . Please run this and you’ll understand the things in a better way.

Now, coming to String Functions–

  • strlen( $str ) – tells the length of any string
  • strcmp( $str1, $str2) – returns 0 if both strings are equal, returns -1 if str2 is greater than str1, returns 1 if str2 is smaller than str1 . The point to remember her is it is case sensitive.
  • strcasecmp($str1, $str2) – it is case- insensitive, and returns the same output as strcmp().
  • strstr($haystack, $needle) – here $haystack and $needle are not any ‘bhoot’ :). These are simple parameters. First look at this code- 
<?php

$ques1 = "my name is khan, and yours?";
$ques2 = "is";

echo strstr($ques1,$ques2);

?>

Please, run this code first and then read my explanation. $haystack is a string in which PHP finds $needle (it is also a string) and the from the position where it finds $needle, it prints the complete $haystack till last. I have replaced $haystack with $ques1 and $needle with $ques2 $haystack and $needle are terms given by PHP. You may completely ignore these complex-looking terms.

  • strpos( $haystack, $needle, [offset]) – it tells the index number of $needle in $haystack. Remember that index number starts with 0. Here offset is an optional parameter, it gives the position from where the $needle is searched in $haystack.
  • str_replace($search, $replace, $subject, [$count]) – the term $search which will be replaced by $replace in the sentence $subject. Here too, $count is optional and it returns the total number of items replaced.
  • ucfirst($str) – it is used to capitalize first character of $str.
  • ucwords($str) – used to capitalize first character of each word in $str.
  • strtoupper($str) – used to convert $str to uppercase.
  • strtolower($str) – used to convert $str to lowercase
  • str_shuffle( $str) – shuffles the string $str
  • explode($delimiter, $str, [int $limit]) – this performs fantastic job. First look at code and then move on explanation. 
<?php

$str = "India should improve its primary education first to aim for New India";

var_dump(explode('i', $str)); 


?>

In above code, ‘i’ is $delimiter which never gets printed and breaks the string from the place where this ‘i’ is present. When the string is broken its various elements gets stored as an array. So when you will run above code, you will get an array. The third parameter $limit is optional, it states the number of elements in a broken. If you will pass $limit as 2, then there will be only two elements in array. Test it Yourself, it will be more beneficial…

  • implode($glue, $array) – this functions joins all elements of $array with $glue in between. Not got it . Superb ! Look at code below-
<?php

$str = "India should improve its primary education first to aim for New India";

$arr = (explode('i', $str));

echo implode(" ", $arr);
?>

In above code the elements are first separated using explode (it is same as we did in previous code) and then i have stored those elements in $arr and then joined them using implode(). Inside implode(), I have passed space ” ” as $glue and $arr as $array to join the elements with space between them. You run the code and you will understand.

  • str_split($original_str, [$splitting_length]) – this splits the $original_string into $splitting_length size elements. If you have given $splitting_length as 3, then each element of $original_string will be split into elements each of size 3.Try it yourself, its not at all complex.
  • md5($str) – it is a globally used function for security of data. It stands for- Message Digest Algorithm 5. It is used to encrypt $str. The output will always be a 128-bit value irrespective of $str.

That’s it for PHP functions. And this is not the complete list of functions there are many more. These, that I have mentioned, are the most used ones.

Have ERROR FREE coding ! You can now go out and play… 🙂

Pratika Agnihotri HTML

Internal Linking in HTML file…

Getting goosebumps? or Excited ? 🙂

Have patience because today we’ll design the same page. And what is shown above is not the complete design, there is a lot to scroll down. But believe me, this is going to be really fantastic and you will enjoy designing this page. Imagine, how will you feel after you have designed your page fully.

What is needed is your complete attention and focus. I will upload whole code here (it is a little big because I have embedded whole speech so as to show internal linking). But but but… watching that code will not make you learn new things, rather you should code yourself and if you are facing any problem then you can refer to my code just for hint. So honesty need to be applied here… 🙂

Internal Linking is very much useful in web pages containing large documents where there are some links at starting of the page and on clicking those links we reach to our desired content in the same page. Usually, the links are at beginning of page but they can be anywhere. It could be on bottom of page to reach top of the page.

For internal linking <a></a> anchor tag is used. If I have designed a web page with three big stories in it. Then what I’ll do is I will add three links at the starting of my page which will straightly direct the reader to the required story. And this same thing I have implemented in my self-designed web page.

In above screenshot, I have added five links in my page if you’ll click first one you’ll reach first story in one go without scrolling and this applies to all the remaining four links.

I am now uploading my code so that you can see how anchor tags are used-

<html>
  <head>
    <title>About Us</title>
  </head>
  <body text="darkcyan" bgcolor="azure" align="center">

      <br><br>
    <hr color="darkcyan" size="15" width="600px">
    <a name="top">  <h1 size="6">Speech at Stanford</h1>  </a>
    <hr color="darkcyan" size="15" width="600px">

    <br><br>
    <img src="stevejobs.jpg" alt="Commencement Address" border="10">

    <br><br>
    <a href="#first">Click here to reach First story</a>            <br><br>
    <a href="#second">Click here to read Second story</a>           <br><br>
    <a href="#third">Click here to read Third story</a>             <br><br>
    <a href="#video">Click here to watch video</a>                    <br><br>
    <a href="#end">Click here to get to the END of the Speech</a>   <br><br>


    <pre>
    <font size="5">
    <p>I am honored to be with you today at your commencement from one of the finest
      universities in the world. I never graduated from college. Truth be told, this
      is the closest I’ve ever gotten to a college graduation. Today I want to tell
      you three stories from my life. That’s it. No big deal. Just three stories.

      <b><u><a name="first">The first story is about connecting the dots.</a></u></b>

      I dropped out of Reed College after the first 6 months, but then stayed around
      as a drop-in for another 18 months or so before I really quit. So why did I drop out?

      It started before I was born. My biological mother was a young, unwed college
      graduate student, and she decided to put me up for adoption. She felt very
      strongly that I should be adopted by college graduates, so everything was all
      set for me to be adopted at birth by a lawyer and his wife. Except that when
      I popped out they decided at the last minute that they really wanted a girl.
      So my parents, who were on a waiting list, got a call in the middle of the
      night asking: “We have an unexpected baby boy; do you want him?” They said:
      “Of course.” My biological mother later found out that my mother had never
      graduated from college and that my father had never graduated from high school.
      She refused to sign the final adoption papers. She only relented a few months
      later when my parents promised that I would someday go to college.

      And 17 years later I did go to college. But I naively chose a college that was almost
      as expensive as Stanford, and all of my working-class parents’ savings were being spent
      on my college tuition. After six months, I couldn’t see the value in it. I had no idea
      what I wanted to do with my life and no idea how college was going to help me figure
      it out. And here I was spending all of the money my parents had saved their entire life.
      So I decided to drop out and trust that it would all work out OK. It was pretty scary
      at the time, but looking back it was one of the best decisions I ever made. The minute I
      dropped out I could stop taking the required classes that didn’t interest me, and begin
      dropping in on the ones that looked interesting.

      It wasn’t all romantic. I didn’t have a dorm room, so I slept on the floor in friends’
      rooms, I returned Coke bottles for the 5¢ deposits to buy food with, and I would walk the
      7 miles across town every Sunday night to get one good meal a week at the Hare Krishna
      temple. I loved it. And much of what I stumbled into by following my curiosity and intuition
      turned out to be priceless later on. Let me give you one example:

      Reed College at that time offered perhaps the best calligraphy instruction in the country.
      Throughout the campus every poster, every label on every drawer, was beautifully hand
      calligraphed. Because I had dropped out and didn’t have to take the normal classes,
      I decided to take a calligraphy class to learn how to do this. I learned about serif
      and sans serif typefaces, about varying the amount of space between different letter
      combinations, about what makes great typography great. It was beautiful, historical,
      artistically subtle in a way that science can’t capture, and I found it fascinating.

      None of this had even a hope of any practical application in my life. But 10 years later,
      when we were designing the first Macintosh computer, it all came back to me. And we
      designed it all into the Mac. It was the first computer with beautiful typography.
      If I had never dropped in on that single course in college, the Mac would have never
      had multiple typefaces or proportionally spaced fonts. And since Windows just copied
      the Mac, it’s likely that no personal computer would have them. If I had never
      dropped out, I would have never dropped in on this calligraphy class, and personal
      computers might not have the wonderful typography that they do. Of course it was
      impossible to connect the dots looking forward when I was in college. But it was
      very, very clear looking backward 10 years later.

      Again, you can’t connect the dots looking forward; you can only connect them looking
      backward. So you have to trust that the dots will somehow connect in your future.
      You have to trust in something — your gut, destiny, life, karma, whatever. This
      approach has never let me down, and it has made all the difference in my life.

      <u><b><a name="second">My second story is about love and loss.</a></b></u>

      I was lucky — I found what I loved to do early in life. Woz and I started Apple in
      my parents’ garage when I was 20. We worked hard, and in 10 years Apple had grown
      from just the two of us in a garage into a $2 billion company with over 4,000
      employees. We had just released our finest creation — the Macintosh — a year earlier,
      and I had just turned 30. And then I got fired. How can you get fired from a company
      you started? Well, as Apple grew we hired someone who I thought was very talented
      to run the company with me, and for the first year or so things went well. But
      then our visions of the future began to diverge and eventually we had a falling out.
      When we did, our Board of Directors sided with him. So at 30 I was out.
      And very publicly out. What had been the focus of my entire adult life was gone, and
      it was devastating.

      I really didn’t know what to do for a few months. I felt that I had let the previous
      generation of entrepreneurs down — that I had dropped the baton as it was being passed
      to me. I met with David Packard and Bob Noyce and tried to apologize for screwing up
      so badly. I was a very public failure, and I even thought about running away from the
      valley. But something slowly began to dawn on me — I still loved what I did. The turn
      of events at Apple had not changed that one bit. I had been rejected, but I was still
      in love. And so I decided to start over.

      <a name="video">
         <video controls="true" autoplay poster="stevejobs.jpg">
          <source src="SPEECHjobs.webm" type="video/mp4"> 
         </video></a>

      I didn’t see it then, but it turned out that getting fired from Apple was the best thing
      that could have ever happened to me. The heaviness of being successful was replaced by
      the lightness of being a beginner again, less sure about everything. It freed me to
      enter one of the most creative periods of my life.

      During the next five years, I started a company named NeXT, another company named
      Pixar, and fell in love with an amazing woman who would become my wife. Pixar went
      on to create the world’s first computer animated feature film, Toy Story, and is
      now the most successful animation studio in the world. In a remarkable turn of events,
      Apple bought NeXT, I returned to Apple, and the technology we developed at NeXT is
      at the heart of Apple’s current renaissance. And Laurene and I have a wonderful family
      together.

      I’m pretty sure none of this would have happened if I hadn’t been fired from Apple.
      It was awful tasting medicine, but I guess the patient needed it. Sometimes life hits
      you in the head with a brick. Don’t lose faith. I’m convinced that the only thing that
      kept me going was that I loved what I did. You’ve got to find what you love. And that
      is as true for your work as it is for your lovers. Your work is going to fill a large
      part of your life, and the only way to be truly satisfied is to do what you believe is
      great work. And the only way to do great work is to love what you do. If you haven’t
      found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know
      when you find it. And, like any great relationship, it just gets better and better as
      the years roll on. So keep looking until you find it. Don’t settle.

      <b><u><a name="third">My third story is about death.</a></u></b>

      When I was 17, I read a quote that went something like: “If you live each day as if it
      was your last, someday you’ll most certainly be right.” It made an impression on me,
      and since then, for the past 33 years, I have looked in the mirror every morning and
      asked myself: “If today were the last day of my life, would I want to do what I am
      about to do today?” And whenever the answer has been “No” for too many days in a row,
      I know I need to change something.

      Remembering that I’ll be dead soon is the most important tool I’ve ever encountered
      to help me make the big choices in life. Because almost everything — all external
      expectations, all pride, all fear of embarrassment or failure — these things just fall
      away in the face of death, leaving only what is truly important. Remembering that you
      are going to die is the best way I know to avoid the trap of thinking you have something
      to lose. You are already naked. There is no reason not to follow your heart.

      About a year ago I was diagnosed with cancer. I had a scan at 7:30 in the morning,
      and it clearly showed a tumor on my pancreas. I didn’t even know what a pancreas was.
      The doctors told me this was almost certainly a type of cancer that is incurable, and
      that I should expect to live no longer than three to six months. My doctor advised me
      to go home and get my affairs in order, which is doctor’s code for prepare to die. It
      means to try to tell your kids everything you thought you’d have the next 10 years to
      tell them in just a few months. It means to make sure everything is buttoned up so
      that it will be as easy as possible for your family. It means to say your goodbyes.

      I lived with that diagnosis all day. Later that evening I had a biopsy, where they
      stuck an endoscope down my throat, through my stomach and into my intestines, put a
      needle into my pancreas and got a few cells from the tumor. I was sedated, but my wife,
      who was there, told me that when they viewed the cells under a microscope the doctors
      started crying because it turned out to be a very rare form of pancreatic cancer that is
      curable with surgery. I had the surgery and I’m fine now.

      This was the closest I’ve been to facing death, and I hope it’s the closest I get for
      a few more decades. Having lived through it, I can now say this to you with a bit
      more certainty than when death was a useful but purely intellectual concept:

      No one wants to die. Even people who want to go to heaven don’t want to die to get
      there. And yet death is the destination we all share. No one has ever escaped it.
      And that is as it should be, because Death is very likely the single best invention
      of Life. It is Life’s change agent. It clears out the old to make way for the new.
      Right now the new is you, but someday not too long from now, you will gradually
      become the old and be cleared away. Sorry to be so dramatic, but it is quite true.

      Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped
      by dogma — which is living with the results of other people’s thinking. Don’t let the
      noise of others’ opinions drown out your own inner voice. And most important, have the
      courage to follow your heart and intuition. They somehow already know what you truly
      want to become. Everything else is secondary.

      When I was young, there was an amazing publication called The Whole Earth Catalog,
      which was one of the bibles of my generation. It was created by a fellow named
      Stewart Brand not far from here in Menlo Park, and he brought it to life with his
      poetic touch. This was in the late 1960s, before personal computers and desktop
      publishing, so it was all made with typewriters, scissors and Polaroid cameras.
      It was sort of like Google in paperback form, 35 years before Google came along:
      It was idealistic, and overflowing with neat tools and great notions.

      Stewart and his team put out several issues of The Whole Earth Catalog, and then
      when it had run its course, they put out a final issue. It was the mid-1970s,
      and I was your age. On the back cover of their final issue was a photograph of an
      early morning country road, the kind you might find yourself hitchhiking on if
      you were so adventurous. Beneath it were the words: “Stay Hungry. Stay Foolish.”
      It was their farewell message as they signed off. Stay Hungry. Stay Foolish. And I
      have always wished that for myself. And now, as you graduate to begin anew, I wish
      that for you.

      <a name="end"> Stay Hungry. Stay Foolish.</a>

      Thank you all very much.

      <a href="#top"><img src="arrow.png" width="45px" height = "45px"></a>
    </pre>

    </p>
    </font>
  </body>
</html>

This code is lengthy just because I have included his whole speech. Believe me it’s super easy.

In above code, look in lines- 16,17,18,19,20. I have used <a></a>. And inside anchor tag, I have given some name to href and that name begins with #. And between anchor opening <a> and closing </a> tags, I have placed the string which I want user to read. In line 16, I have typed – ‘Click here to reach First story’, this means i want the reader to go to the first story in case he clicks in that line. The location where I want to send the reader is line 30. So concentrate in line 30, there too I have used <a></a> but this time the the name of href is not preceded by #. So this is the basic difference between the use of anchor tags- in the link where the reader actually clicks and the location where the reader should reach upon clicking that link. Note the difference carefully.

Now let’s look at line 17. Here I have placed the string “Click here to read second story”, that means I want the reader to reach to the second story, which is at line 87, after clicking this link. So, in line 87, I have used anchor tag and href property, but note that the name of href is not starting with #, whereas the link which we want the user to press to reach second story(in line 17) contains #.

So with the help of above examples, you must be clear how to perform internal linking. And yes you can give any name to href, but the name should be same in both places (in link and at location where the reader should reach upon clicking the link). Instead of text/string which I have used in line 16, 17, 18,19, 20, we can also use any image to allow user to click on that image to reach the desired location. Nothing extra needs to be done. You just need to put your <img> tag (to insert image) between <a> and </a>. Look at line 208 for hint. I have inserted an image so as to reach to top. So, I have given #top name to href inside anchor opening tag and at top of the page look at heading line 9, there I have used the same name top. This clearly means that if reader clicks that image on the bottom of the page, he will quickly reach to the top, no matter what is the length of the page.I hope this is quite clear now. 🙂

I know, you guys must be wondering what I have done to line 19? Where it is linking? Okay so look at line 109. Don’t get confused, it is simple. I have just embedded a video there with the help of <video> tag and have smartly placed this video tag inside anchor tag so that when user clicks on line 19 at the top,(which is a string- Click here to watch video), he is likely to reach the place where I have embedded an inspirational video. Yes, it’s truly inspirational.

You may proudly watch that video after having completed your this project.

I have used one more tag <pre></pre> and I have never used this before. This actually preserves the text. If you want to copy-paste some matter from a site to your web page and you want that it should look exactly as it was looking in that site. Then you can safely use <pre> tag. Do it yourself without and with the use of <pre> tag, you will surely get it. Try it yourself, you will be better understood.

That’s all. Hope you like this. And I think solving errors and issues and doubts make the topics more clear. So please, if you have any issue, share it here in comments and you will get back the reply. Suggestions are also welcomed… 🙂

Have ERROR FREE coding !

Pratika Agnihotri HTML

Media files in HTML


<html>
  <head>
    <title>AUDIO and VIDEO</title>
  </head>
  <body align="center">

    <br><br>
    <embed src="alarm.png" width="600px" height="300">

    <br><br>
    <audio controls="True" >
      <source src="song.mp3" type="audio/mp3">
    </audio>

    <br><br>
    <video controls="true" autoplay poster="posterimage.jpg">
      <source src="RT.mp4" type="video/mp4">
    </video>

  </body>
</html>

To insert audio in our web page, we use <audio></audio> tag. Inside this tag, put controls=”true” (please see above code for hint) in order to play audio file. Remember that the audio file which you are going to insert should be placed inside the same folder in which your current html file is placed. Usually, audio files have ‘.mp3’ extension but it can be .wav or .ogg so you should be careful for extension. Inside the <source> tag, place name of audio file with extension and type=”audio/mp3″ will remain same for all extension.

The same rules apply for <video></video> too. Look above code for help.(Pay attention to extension of video file).

<embed> tag allows to insert either audio or video or image file. (Look above code to get a hint.)

That’s it for media files.

Have ERROR FREE coding !

Please share your doubts here, if any.

Pratika Agnihotri HTML

Forms in HTML continued…

In the previous post we designed a good-looking form. Yes we did that (you should proudly smile for that). And now we’ll move a step further.

But before making any changes in the coding of our previous form, let me introduce you with my next post which will be a fantastic layout of a Home Page . So don’t miss it, it will be a whole FUN, I guarantee.

We can limit the user/applicant to enter only valid details in a form. For this we need to add some attributes inside <input> just like we have learnt to add type and name attribute. In the same manner we’ll add the following attributes-

required=”true” . In whichever field (by field i mean whether name or qualification or address or any field of your form) you use this property, that field will become mandatory to be filled in order to submit the form.

<tr><th>Name</th><th><input type="text" name="name" required="true"></th></tr>

I have implemented in only one field, you may apply to all (I am making changes in same form we designed in previous post).

placeholder=”Enter your name” . You may use this as-

<tr><th>E-mail</th> <th><input type="email" name="mail" required="true" placeholder="Enter your email"></th></tr>

I have used this placeholder in my email field, you may use in any field and can give any name in placeholder.

maxlength=” “ with this you may restrict the applicant to limit the text upto a certain length. This text could be his name or introduction or anything text-based.

Just like maxlength, max and min are used to limit numbers. These are also attributes inside <input>, so you can put nthem there and run the code. You may use this max and min even in date. Remember the pattern yyyy-mm-dd

<tr><th>DOB</th> <th><input type="date" name="dob" required="true" max=2020-10-19 min="2008-04-19"></th></tr>

QUERY STRING

Query String is the means to send information from one page to other through Uniform Resource Locator. In previous post we have seen how the information given by an applicant is shown in the url. Even the password is clearly visible. It means we cannot give sensitive information through this. But there is a way out. With the use of method = “post ” attribute inside <form>, we can hide the information. Please do it yourself and check the url after submitting the form.

Till now the information was loaded in the same page in which the form was displayed but if we want to send that information to some other page( this could be a html or php or any file which could be opened on browser), we can do so. This is done using action attribute inside <form> tag. We can give some name of other html file in the action and run the code. And be sure that the file whose name you are going to put in action is in the same folder. This time as soon as you will submit the form , you will be directed to that page whose name you have given in action. Let me quickly show you that line of code-

<form method="post" action="syntax.html">

By default method is get.

That’s it for this post. I have tried to keep this short and simple. But if you have any doubt share your problems here in comments. And follow this blog so that you may know about new posts.

Have ERROR FREE coding !

Pratika Agnihotri HTML

Designing Forms in HTML

Forms provide a formal way to get information from client/user.

With HTML, we can create forms too. The basic idea is to create a table and add various fields using the <input/> tag. Note that input tag is a singular tag.

Let me show you a basic structure first-

Above code looks complex, but believe me its super easy. I have first done some formatting inside the <body> just to make the page look good. You can ignore doing this.

Then, I have created a table using <table> tag. I have done some formatting here also, just to make the table look good. And I believe you are aware of all the tags and their properties used till here (till table tag).

Now, inside table tag I need to create several rows with two columns each. One column for field name other for user input.

Since I need several rows, I will use <tr> for each row and in order to store some data in it we will use <th> . Remember it is a table heading tag which makes the content inside a cell as bold and aligned at center. <input> tag is used to take input from the user.

Inside <input>, we have to specify what type of input we want from user- text( used to take input in the form of text from the user so that’s why in above code I have used it while taking the name, father’s name, mother’s name from the user) or number (used to take number from user) or email (takes email from user) or password (a secret code from user as password) or date (takes date from user) or radio button (used to allow user to choose any one option among many) or checkbox (used to allow user to choose many options or even user can select all options).

Please note that, in case of radio buttons if you select all the all the radio buttons, then all will be selected. And this is something we do not want. We want only one radio button to be selected. For this, we add one property ‘name‘ in all the radio buttons and the name for the name should be same for all. You could write something like this…

<tr><th>Gender</th> <th><input type="radio" name="gen1">Male
                              <input type="radio" name="gen1">Female</th></tr>

You can give name any name of your wish. And if you want to know the use of this name, then after completing your coding part fully run your code in browser ( run your code after reading the whole post), fill all the details and then click on SUBMIT button (adding SUBMIT button and its proper working is shown at last). After you SUBMIT, look at your web page’s URL before and after filling the form. I hope you got the thing.

To give a address field, we use <textarea></textarea> tag . It has some properties like rows, columns. You can give values as per our needs. You can very easily add this field in your form using following code-

<tr><th>Address</th> <th><textarea rows="7" cols="30"></textarea></th> </tr>

To add a qualification field in our form, we can give a drop down list to user to select any one option from that list. This dropdown list is useful than giving radio buttons because it will take much lesser space than radio buttons. So, to allow user to select any one item from the list we use <select></select> tag. After <select> , we need to give options to be displayed in the drop down list. These options are placed inside <option></option> We can add this ‘qualification’ field using following code-

To give a color field in our form, we can use input type as color. To allow user to upload his/her image we will have to use input type as file. The code for both these field will be-

<tr><th>Color</th> <th><input type="color"></th> </tr>
<tr><th>Image</th> <th><input type="file"></th> </tr>

Almost everything is added in our form, feeling Happy… Wait ! Wait ! . We have forgotten to add ‘submit’ , ‘reset’ button. We can even give an image which will act like submit button. Seeeee… the code below-

After adding your submit button, if you run your code in browser, fill details and click SUBMIT, you’ll experience no changes, nothing will take place. To make the SUBMIT work add <form> just below <body> and close </form> just before </body>.

Your final code would be like this clean code (it is really a good habit to write a clean and readable code) –

<html>
  <head>
    <title>Forms in HTML</title>
  </head>
  <body text="black" bgcolor="lightblue">
    <form >

    <table bordercolor="black" bgcolor="lightgray" cellspacing="0" cellpadding= "8px"
            border="10" align="center" width="500px" >

      <tr><th>Name</th><th><input type="text" name="name"></th></tr>
      <tr><th>Father's Name</th> <th><input type="text" name="fname"></th></tr>
      <tr><th>Mother's Name</th> <th><input type="text" name="mname"></th></tr>
      <tr><th>Mobile no.</th> <th><input type="number" name="mob"></th></tr>
      <tr><th>Password</th> <th><input type="password" name="pwd"></th></tr>
      <tr><th>E-mail</th> <th><input type="email" name="mail"></th></tr>
      <tr><th>Gender</th> <th><input type="radio" name="gen1">Male
                              <input type="radio" name="gen1">Female</th></tr>
      <tr><th>DOB</th> <th><input type="date" name="dob"></th></tr>
      <tr><th>Address</th><th><textarea rows="5" cols="30" name="add"></textarea></th></tr>

      <tr><th>Qualification</th><th><select name="qul">
                                    <option>**Select</option>
                                    <option>Phd</option>
                                    <option>Mphil</option>
                                    <option>MBA</option>
                                    <option>GateRanker</option>
                                    <option>Mtech</option>
                                  </select></th></tr>

    <tr><th>Color</th><th><input type="color" name="color"> </th></tr>
    <tr><th>Image</th><th><input type="file" name="img"> </th></tr>

    <tr><th colspan="2"><input type="submit">
                        <input type="reset">
                        <input type="image" src="wallpaper.jpg" width="50px" height="40px">
        </th></tr>

    </table>
  </form>
  </body>
</html>

Now, our form is complete… You can save the code and run it… You will get a wonderful output. Look what I am getting in my browser…

We will see some more features in our next continued post

Have a ERROR FREE coding !

Pratika Agnihotri HTML

Table in HTML

Tables are a great way to integrate your content in lesser space. Now, the question is how to make them in HTML. Well, HTML provides a <table></table> tag to insert your table in HTML page. Suppose, I want to create a table to record a top player from each cricket team (World class) .Let me first show you a basic structure-

So, a table is created inside <table></table> tag. Then, to insert a row (remember rows are horizontal, columns are vertical), we use <tr></tr> (table row) tag . Inside <tr>, we use <td></td> (tabular data) . Within <td></td>, we write our content of table. So, where are columns?

The content which you will insert inside <td></td> will make a separate column. For eg. in above code, I have used two <td></td> tags inside each row. It means, I have designed 4X2 table (4 rows, 2 columns).

The output of above code will be something like-

This border may differ in other browsers. I am using advanced version of Opera, so its something different from other browsers. For practical, try running the code after removing border property inside <table> tag and see the effect.

Like this border property, we have many more properties which we can use inside table tag, I will share some common ones-

width – sets the width of table ; align – positions the table in the web page ; bgcolor – sets the background color of the table ; background – we can set image as the background of the table, but remember that image should be in the same folder.

cellspacing – cells are the boxes which contains our content. In above code, I have created 8 cells look carefully. So the space between these cells is cell spacing and we can use this property to increase/decrease the space between cells.

cellpadding – the space between cell and the content in that cell is cell padding.

Let’s implement the above properties in one code. You can create your own table simply by playing with the values in each property.

original table

And it will result the following output-

We can set the content of each row in center by inserting align property – <tr align="center"> or if we wish to align the content of particular cell use- <th align="center">.

We can add heading for each column using <th> tag. We need to replace <td> with <th>. That’s it ! . Content inside ‘th’ tag is always in bold, as well as, is aligned at center. . It works as follows-

We only need to look at the first line. Look, I have used <th> in first row to make ‘Country’ and ‘Player’ as heading of their columns. Now look at its output-

Now, if we want to merge two rows, we use rowspan and if we want to merge two columns, we use colspan.

Suppose, if we want to merge ‘Root and Rohit’ into one and name it as ‘Root’, then this is called rowspan. It’s code will be-

And this will output –

Similarly, if we want to merge columns then –

Run above code and analyse the result. For better understanding of rowspan and colspan, compare both the above codes with original code.

<caption></caption> tag is used to set a small 2-3 word title for the table. Remember it is a paired tag, since it has both opening and closing tags. Caption tag is used after all the rows are done, but before the end of </table> table tag.

So just before this tag </table>, we can write –

<caption align="bottom">Table 8.1</caption>

This will insert a caption at the bottom of the table. We can use align as “top” also, as per our preference. And can insert any piece of content, I have written ‘Table 8.1’, you can write anything.

If you face any issue in above post,share here in comments.

Have ERROR FREE coding.