Tutorial for fread() in Reading file

What is fread()?

The file’s data is read using the PHP fread() function. Two parameters are required: file resource and file size.

Read the File using fread()

Using the fread() method, we may read content from an already open file. There are two parameters to the fread() function:

  • first is the filename
  • and the second argument specifies the size in bytes for the content to be read.

Example:-

Let’s take an example, if we have a file studytonight.txt with following content:

Studytonight is for coding enthusiasts!

If we wish to read the file’s complete content, we’ll open it in read mode and then use the fread() method.

Output:-

Tagged : / / / / / /

Tutorial for Reading file on File Handling in PHP

What is Reading file on File Handling?

PHP has a number of functions for reading data from files. You may read entire file data, read data line by line, or read data character by character using various methods.

How many types of PHP file Read Functions are:-

The available PHP file read functions are given below.

  • fread()
  • fgets()
  • feof()

PHP readfile() Function

Reads a file and publishes it to the output buffer with the readfile() method.

Assume we have a text file on the server named “webdictionary.txt” that looks like this:

AJAX = Asynchronous JavaScript and XML
CSS = Cascading Style Sheets
HTML = Hyper Text Markup Language
PHP = PHP Hypertext Preprocessor
SQL = Structured Query Language
SVG = Scalable Vector Graphics
XML = EXtensible Markup Language

The following is the PHP code for reading the file and writing it to the output buffer (the readfile() method returns the number of bytes read if successful):

Example:-

If all you want to do is open a file and read its contents, the readfile() method comes in handy.

Tagged : / / / / / / / / / / / /

Accessing Form Fields in JavaScript

Accessing Form

JavaScript provides various ways of accessing form:-

  • document.forms[index_number] – It returns collection of form in the documents.
  • document.forms[“name_attribute_value”] – we can use name attribute of the form.
  • document.name_attribute_value – we can use name attribute of the form with dot as well.
  • getElementById(“ID”) – If form as an unique id we can use it.

Accessing Form Fields

If form fields have unique ID then it is possible to access them using the getElementById( ) method. However, There are some other ways: –

  • elements[ ] – It contains collection of form fields.

Syntax: –

document.form_name.elements[index_number];
document.form_name.elements[“name_attribute_value”];
document.form_name.name_attribute_value;
document.form_name.ID_attribute_value;

  • getElementsByName(“field_name”) – This method is also used to access form field.
Tagged : / / /

How to use Form Handling in javascript

Form Handling

JavaScript provides access to the forms within an HTML document through the Form object known as HTMLFormElement in the DOM. Which is a child of the Document Object.

Properties

PropertiesValueDescription
accept-charsetUTF-8Specifies the charset used in the submitted form (default: the page charset).
actionURLContains a URL that defines where to send the data after submitting the form
autocompleteOn (default)
Off
Determines that the browser retains the history of previous values.
enctypespecifies how the browser encodes the data before it sends it to the server. (default: is url-encoded).
encodingHolds the value of the enctype attribute, which usually contains either application/x-www-form-urlencoded value or the multipart/form-data value (in the case of file upload)
elements[ ]An array of DOM elements that correspond to the interactive form fields within the form

Properties

PropertiesValueDescription
lengthThe number of a form field with a given form tag. Should bt the same as elements.length
methodGET (default)
POST
Specifies how to send the form data to a web server. The data can be sent as URL variables, by using the get method or as HTTP post, by using the post method
namenameSpecifies a name used to identify the form
novalidatenovalidateSpecifies that the browser should not validate the form.
target_self (default)
_blank
_parent
_top
framename
Specifies the target of the address in the action attribute

Methods

MethodDescription
checkValidity ( )Returns a true or false value indicating whether or not all the fields in the form are in a valid state.
reset ( )Returns all form fields to their initial state.
submit ( )Submits the form to the URL specified in the form’s action attribute

Events: –

  • onreset
  • onsubmit
Tagged : / / / / / / /

What is the difference between a timeout and an interval in Javascript?

setTimeout( ) Method

The setTimeout() method sets a timer which executes a function or specified piece of code once after the timer expires. The function is only executed once. It returns a positive integer value which identifies the timer created by the call to setTimeout(); this value can be passed to clearTimeout() to cancel the timeout.

Syntax: –
setTimeout (function, milliseconds, para1, para2);
Ex: – var timeoutID = setTimeout(show, 2000);

clearTimeout( ) Method

The clearTimeout() method cancels a timeout previously established by calling setTimeout(). The ID value returned by setTimeout() is used as the parameter for the clearTimeout() method.

Syntax: – clearTimeout (timeoutID);

Ex: – clearTimeout(timeoutID);

setInterval( ) Method

The setInterval() method repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. It returns an interval ID that uniquely identifies the interval, so you can remove it later by calling clearInterval().

Syntax: – setInterval (function, milliseconds, para1, para2);

Ex: – var intervalID = setInterval(show, 2000);

clearInterval( ) Method

The clearInterval() method cancels a timed, repeating action that was previously established by a call to setInterval().

Syntax: – clearInterval (intervalID);

Ex: – clearInterval(intervalID);

Tagged : / / / / / /

DOCTYPE Declaration HTML5

<!DOCTYPE html>

HTML 5 Tags

  • Header – It specifies a header for a document or section.
  • Nav – It defines navigation links.
  • Section – It defines a section in a document.
  • Article – It defines an article. For example a blog post or forum post etc.
  • Aside – It can define content aside from the page content like a sidebar.
  • Details – It is used to defines additional details that the user can view or hide. It has one attribute-value pair which is open = “open” and that means by default the data will be visible for users/viewers. By default it has False value so the details will be hidden.
  • Summary – It is used to defines a visible heading for a <details> element.
  • Footer – It specifies a footer for a document or section.

Meter Tag

It defines a scalar measurement within a known range or a fraction value. This is also known as a gauge. It should not be used to indicate the progress bar. If the browser doesn’t support the meter tag then it will show text written between the opening meter tag and the closing meter tag.

Ex:-

<meter value=“20” max=“100” min=“10”>Range</meter>

<meter low=”60″ high=”80″ value=”100″ max=”100″>Range</meter>

Meter Tag Attributes

AttributeValueDescription
valueNumberSpecifies the current value of the meter. This must be between the min and max values.
formForm_idIt associates the <meter> with a <form>
highNumberIt specifies the range that is considered to be a high value. This must be less than the max value.
lowNumberIt specifies the range that is considered to be a low value. This must be greater than min value.
maxNumberIt specifies the max value of the range.
minNumberIt specifies min value of the range.
optimumNumberIt specifies what value is the optimal value for the meter.
  • Mark – This tag is used to highlight text or part of the text. Ex: – <p>This is <mark>Geekyshows</mark></p>
  • Dialog – This tag defines a dialog box or window. It can be used to create popup dialogs. It has one attribute-value pair which is open = “open” and that means by default the data will be visible for users/viewers. By default it has False value so the data will be hidden. Ex: – <dialog>Click Here</dialog>
  • Main – This tag specifies the main content of a document. The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element. Ex: – <main><article>This is art</article></main>
  • wbr – The <wbr> (Word Break Opportunity) element specifies a position within text where the browser may optionally break a line if necessary. Ex: – <p>Hello worldddddddddddddddddd<wbr>welcome</wbr></p>
  • Figure – The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.  Ex: – <figure> <img src=“image.jpg“ width=”304″ height=”228″> </figure>
  • figcaption – The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or last child of the <figure> element. Ex: –
     <figure>
       <img src=“image.jpg" width="304" height="228">
       <figcaption>Picture One</figcaption>
     </figure>
  • Progress – The <progress> element represents the completion progress of a task. It has two attributes max which Specifies how much work the task requires in total and value which Specifies how much of the task has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if the max attribute is not present. Ex: –  <progress id=”bar” value=”0″ max=”100″> </progress>
Tagged : / / / / / / / /

HTML: Id Attribute

The id attribute specifies a unique id for an HTML element. The value must be unique within the HTML document.

The id attribute is mostly used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id. The id attribute can be used on any HTML element.

Rules

  • Must begin with a letter A-Z or a-z.
  • A class name cannot start with a number.
  • Must not contain any space characters.
  • Can be followed by: letters (A-Za-z), digits (0-9), hyphens (“-“), and underscores (“_”).
  • In HTML, all values are case-insensitive.
<html>
	<head>
		<title> id attribute</title>
		<style>
			#top{
				color: blue;
			}
			#imp{
				color: brown;
			}
		</style>
	</head>
	<body>
		<a href="#imp">Important</a>
		<p id="top">
			Once upon a time, all the birds - the swans, cranes, </p>
		<h3 id="imp">
			Goodwill is that unseen force which is </h3>
		<p>He has neither the time, nor the interest to bother </p>
		<a href="#top">Go to Top</a>
	</body>
</html>
Tagged : / / / / / / /

HTML: Class Attribute

The HTML class attribute makes it possible to define equal styles for elements with the same class name. The class attribute specifies one or more class names for an element. The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.

In HTML5, the class attribute can be used on any HTML element.

Rules

  • Must begin with a letter A-Z or a-z.
  • A class name cannot start with a number.
  • Must not contain any space characters.
  • Can be followed by: letters (A-Za-z), digits (0-9), hyphens (“-“), and underscores (“_”).
  • In HTML, all values are case-insensitive.
<html>
	<head>
		<title>class tag</title>
		<style>
			.red {color: #FF0000; font-size: 60px;}
		</style> 
	</head>
	<body>
	<h2 class=red> Heading line </h2>
	<p class =red>1st paragraph line</p>
	<p> paragraph tag </p>
	</body>
</html>

More than one class name

To specify multiple classes, separate the class names with a space. This allows you to combine several CSS classes for one HTML element. Syntax:- class=“class_name1 class_name2 class_nameN” Ex:- <p class =“red look”>I am first paragraph</p>

<html>
	<head>
		<title>class name twice or max </title>
		<style>
			p.red {color: #FF0000;}
			p.look{font-size: 100px;}
			.algn{text-align: center;}
		</style> 
	</head>
	<body>
	<h2>I am Heading</h2>
	<p class ="red look"> first paragraph</p>
	<p class="red algn">second paragraph</p>
	
	</body>
</html>

Tagged : / / / / / / /

HTML: Style Attribute

The style attribute is used to set the style of an HTML element. In HTML5, the style attribute can be used on any HTML element. Syntax: –

style=“property1: property1-value; property2: property2-value;” Where property is CSS property and Property-value is CSS value.

<html>
	<head>
		<title>Hello CSS</title>
	</head>
	<body>
	<h1 style= color:blue  font-size: 45em; >
                   I am Heading
        </h1>
	<p style= color:rgb(38,226,85) font-size: 40px; > 
                  I am 1st Para
        </p>
	<p>I am second Paragraph</p>
	</body>
</html>
Tagged : / / / / / /

HTML: div tag

The HTML <div>…..</div> tag is used define a section of document. Using div tag, you can group large sections of HTML elements together and format them with CSS. The <div> element is very often used together with CSS, to layout a web page.

By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

Inside: Body tag

<html>
	<head> </head>
	<body>
		<p>paragraph outside div tag</p>

		<div style="color: red">
  		         <h3>heading tag is inside div tag</h3>
  		          <p>paragraph tag is inside div tag</p>
		</div>

	</body>
</html>

Outside: Body tag

<html>
	<head>
		<style>
			div {
    				color: red;
			       }
		</style>
	</head>
	<body>
		This is body. 
	<div> inside div tag which is calling form the out side of the body</div>
	</body>
</html>

Tagged : / / / / / / /