fopen( ) – This function is used to open a file or URL.
Syntax:-
fopen(filename, mode, include_path, context) File name – It is the name of file or url. Mode – in which mode we want to open this file ex: – r, w etc. Include_path – Set this parameter to ‘1’ or TRUE to specify that you want to search for the file in the PHP include path. Context – Contexts modify or enhance the behavior of the data stream from and to files.
If the open operation fails, it returns FALSE and an error on failure.
Width & Height Property usually uses in Images, Card, fonts, tables etc… for responsive & attractive design. So, in this blog, you can learn that how can use the width & height property in CSS?
Width–
This property is used to set the width of an element. We can set this property to auto and length in the form of px, cm, % etc.
Ex:-
div { width: 100px; }
Height–
This property is used to set the height of an element. We can set this property to auto and length in the form of px, cm, % etc.
We can use the PHP File System to create files, read them line by line, character by character, write them, append them, delete them, and shut them. Any program requires file handling. Some tasks necessitate the processing of files. File management in PHP is comparable to how it is done in other computer languages such as C.
Function are those callable section of code that you can pass data to, and that can return data to you. Function are subprograms which are used to compute a value or perform a task.
Which are the Importance of Function?
Easy to debug
Reusability
No code repetition
Easy to handle codes
How to create a Function?
Syntax:-
function function_name( )
{
Block of statement;
}
Example:-
Some rules for creating a function:-
Function name only starts with a letter, an underscore ( _ ).
Function name cannot start with a number.
Do not use Predefined constant name e.g. PHP_VERSION ,PHP_OS etc.
Do not use reserved keywords. e.g. else, if etc.
Function names are case-insensitive, though it is usually good form to call functions as they appear in their declaration.
I absolutely recommend the ‘Web Developer‘ add-on. It gives you some great features which will make your development workflow faster. I enjoy various CSS, form, and image options. No matter if I want to check alt tags, missing images, or image dimensions, this add-on is my preferred choice.
2.Usersnap
The Usersnap Firefox add-on lets you capture and annotate any website. It works great for collecting and managing user feedback on websites or applications or for tracking bugs in your browser.
All screenshots are directly saved in your Usersnap projects. It integrates with your workflow, and you can connect Usersnap with JIRA, Trello, Slack, and 20 other project management tools. A perfect fit for QA and development teams.
3.SeoQuake
SeoQuake will help you in optimizing your web pages for search engines. It gives you a SeoBar that has loads of useful SEO-related options for you to take advantage of. This extension will assist you in identifying issues pertaining to search engine indexing in your web pages.
4.User Agent Switcher
The User-Agent Switcher allows you to switch the user agent of your browser. The add-on will add an option to the tool settings. This option lets you switch the user agent.
5.FireShot
FireShot is a Firefox add-on that creates screenshots of your web page. What is unique about this plugin is that it gives you a set of editing and annotation tools for working with your screenshots. This can be a handy extension to have for presenting your work in your portfolio.
6.Ghostery
Ghostery is a great add-on to display installed trackers and pixels of any website. It helps you to find and analyze the used marketing- and tech stack of any website. And you can block them if you don’t want your session to be recorded.
7.Firebug
Firebug is considered to be the ultimate developer’s tool for Firefox. You are given a ton of web development tools to use from within your browser. You can explore, edit, debug, and monitor CSS, HTML, and JavaScript in real-time on any web page.
8.Greasemonkey
The Greasemonkey Firefox add-on enables you to modify how a web page looks and works by using small snippets of JavaScript. There are hundreds of scripts that you can download to enhance this add-on.
9.ColorZilla
ColorZilla is an advanced color picker and eyedropper. It allows you to get the color of any pixel in the browser window. The extension also has a built-in averaging square. This helps you get a matching color to for a photo. The add-on is pretty simple and easy to use.
10.FireFTP
FireFTP is a streamlined Firefox extension for uploading files to a server. It offers several advantages to standalone FTP applications, such as its operating system-independent requirements. This browser add-on has all the features you would expect from standalone apps.
11.HTTPS Everywhere
This Firefox add-on encrypts all your communication with many major websites. As many sites support HTTPS, they still might use HTTP. Or they fill encrypted pages with links that go back to unencrypted sites. The HTTPS Everywhere add-on fixes these problems by rewriting all requests to HTTPS.
12.Palette Grabber
This add-on will build color themes that are exportable to popular graphic-editing software such as Photoshop, Paint Shop Pro, GIMP, Fireworks, and Paint.NET of the web page you’re currently viewing.
13.Total Validator
This extension is an all-in-one validation tool that will check HTML, links, take screenshots, and do a lot more. It also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (in five different languages), and take screen captures via different web browsers and operating systems to see how your web pages look.
14.BuiltWith
The BuiltWith add-on analyses websites and their technologies, servers, and hosts. It works great for analyzing competitor websites and you can get insights on any web page. And it even displays tracking IDs, like the Google Analytics ID.
15.Web Developer Checklist
The Web Developer Checklist is a simple add-on that gives you an overview of the usability of your site.
16.Platypus
Hands down, Platypus is one of the best Firefox extensions for modifying a web page. It works with Greasemonkey as a sort of WYSIWYG and it will remember your edits when you visit the web page again. You can use it to experiment with different variations of a web design.
17.Dummy Lipsum
An add-on with a very simple purpose, Dummy Lipsum generates Lorem Ipsum dummy text for you to use in your designs.
18.Cookie Manager
This Cookie Manager lets you check and manage the cookies. You are able to view, add, change or even delete cookies in any of the domains. You can even export and import cookies. This is helpful to reproduce certain issues by recreating certain browser sessions.
19.Page Performance Test
It analyses web pages’ performance based on various parameters. The Page Performance Test measures network, browser, and server performance. You can use Page Performance Test directly on your console:
Open up your console; you will now find a new tab “page performance”
Start the performance test.
20.CSSViewer
CSSViewer allows you to inspect CSS properties on a web page that you’re viewing. It’s a great way to study styles that you’ve seen on websites to learn CSS development techniques.
21.Aardvark
Aardvark, aimed at front-end web developers, lets you select web page elements and gives you several options for them, such as removing them from the web page (great for screenshots) or modifying their colors (helpful when printing web pages).
Length property is used to access the length of Text which indicates the number of characters it contains.
Syntax:- TextNode.length
Data
Data property is used to set or return the value of a text node and comment node objects.
Syntax: – Sets TextNode.data = value Returns TextNode.data
Ex:- TextNode.data = “Hello DevOpsSchool”;
appendData(String)
This method is used to append the passed string to the end of the text node and comment node.
Syntax: – TextNode.appendData(String);
Ex: – TextNode.appendData(“Hello DevOpsSchool”);
deleteData(start, length)
This method is used to delete or remove text content from a text node and comment node. It deletes the specified length of characters starting from index defined in start.
Syntax:- TextNode.deleteData(start, length);
Ex: – TextNode.deleteData(0, 5);
insertData(start, string)
This method is used to insert text content to text node and comment node. It inserts the value in string, starting at the character index specified in start.
Syntax:- TextNode.insertData(start, string)
Ex: – TextNode.insertData(3, “Hello”)
replaceData(start, length, string)
This method is used to replace text content of text node and comment node. It inserts the value in string, starting at the character index specified in start.
The splitText(start) method breaks the Text node into two nodes at the specified start index, keeping both nodes in the tree as siblings. It returns right side of the split in a new text node and leaves the left side in the original.
Syntax: – var rightSide = TextNode.splitText(start)
Ex: – var rightSide = TextNode.splitText(5)
substringData(start, length)
It returns the part of the current element’s (TextNode and CommentNode) text content from the specified position with the specified length.
Specifies the charset used in the submitted form (default: the page charset).
action
URL
Contains a URL that defines where to send the data after submitting the form
autocomplete
On (default) Off
Determines that the browser retains the history of previous values.
enctype
(default: is url-encoded)
specifies how the browser encodes the data before it sends it to the server.
method
GET (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
name
name
Specifies a name used to identify the form
novalidate
novalidate
Specifies 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
Input Tag
<input> tag prompts the user to enter data and also request for the information from the web server after submitting the web form.
<form>
<input>
</form>
No input end tag in HTML5
Attribute
Value
Description
accept
file_extension audio/* video/* image/* media_type
Specifies the types of files that the server accepts
alt
text
Specifies an alternate text for an image. only used with type=“image”
autocomplete
on off
It enables or disable autocomplete in <input> tag
autofocus
autofocus
Specifies that an <input> element should automatically get focus when the page loads
checked
checked
Input element should be checked/selected when a web page loads. It is used only with type=”checkbox” and type=”radio”
dirname
inputname.dir
Specifies that the text direction will be submitted
disabled
disabled
Disables the input element when it loads on the client side’s web page, so that user cannot write text in it or select it. This attribute cannot be used with type=“hidden”
form
form_id
Specifies form’s id to which the input field belongs.
formaction
URL
Specifies the URL of the file that will process the input control when the form is submitted
Specifies how the form-data should be encoded when submitting it to the server
formmethod
GET POST
Defines the HTTP method for sending data to the action URL
formnovalidate
formnovalidate
Defines that form elements should not be validated when submitted
formtarget
_blank _self _parent _top framename
Specifies where to display the response that is received after submitting the form
height
pixels
Indicates the height of an input field
list
Id of a datalist
Contains the id of the <datalist> tag where a datalist element contains various options for an input field
max
number date
Specifies the maximum value for an <input> element number, range, date, datetime-local, month, time and week.
maxlength minlength
number
Specifies the maximum/minimum number of characters allowed in a text field.
min
number date
Specifies a minimum value for an <input> element number, range, date, datetime-local, month, time and week.
multiple
multiple
Indicates whether the user is allowed to enter more than one value
name
text
Defines a unique name for the input element.
pattern
regexp
Specifies a regular expression that an <input> element’s value is checked against
placeholder
text
Specifies a short hint that describes the expected value text, search, url, tel, email, and password
readonly
readonly
Indicates that the value of this field cannot be modified.
required
required
Specifies that an input field must be filled out before submitting the form
size
number
Specifies the width of the control. If type=”text” or type=”password” this refers to the width in characters. Otherwise it’s in pixels.
src
URL
Defines the URL of the image to display. It can be used only with type=“image”
step
number
Specifies the legal number intervals for an input field
type
button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week
Indicates the type of the input element. The default value is text.
value
text
Specifies the value of an <input> element
width
pixels
Indicates the width of an input field
Type Attribute
It indicates the type of input element. It’s an empty tag. The default value is text.
Ex: –
<input>
<input type=“text”>
Text – It defines a single-line text field. <input type=“text”>
Password – A password field is like text field, the difference being that this control hides each typed character by displaying an asterisk(*) or bullets(●) instead of the character itself. <input type=“password”>
Button – This is used to add a button on a web form to activate a script when an user click the button. <input type=“button”>
Email – This field is used to add an email address or a list of email address to a form, where type=“email” is a value for the input type. The input format should be an email like example@gmail.com else it will prompt an error. <input type=“email”>
Check Box – A check box is a small box, which when selected includes a checkmark. It is used to allow the user to select one or more than one of the options available on a web page. An User can select or clear the check box by clicking it. <input type=“checkbox”>
Radio Button – A radio button is used to create a series of options of which only one can be selected. It is displayed as a circle which when selected, displays a dot in the middle. <input type=“radio”>
•URL – The URL field is used to enter only the web addresses, in their correct format. If the URL is not entered in the correct format then the URL field validates the text field to enter web address. <input type=“url”> Autofocus – helps in keeping the focus of mouse pointer on the input field. Pattern – defines the regular expression of the text that should be entered in the text field.
Search Box – This is used to add a search box to a form. <input type=“search”>
Tel – The tel type represents a one-line plain-text edit for entering a telephone number. <input type=“tel”>
Range – Range input represents the input of limited range numerical values. <input type=“range”>
Number – Number is used to validate the textbox only if the value within the field is a numerical value. <input type=“number”>
File – This is used to upload a file on a web page. You also need to set the enctype=“multipart/form-data”. <input type=“file”>
Image – It represents either an image from which the UA enables a user to interactively select a pair of coordinates and submit the form, or alternatively a button from which the user can submit the form. <input type=“image”>
Hidden – A hidden control stores the data that is not visible to the user on a web page. This control is used to submit some information, which can not be edited by user. <input type=“hidden”>
Submit – A submit button is used to transfer form data to the URL specified in the <form action> tag.<input type=“submit”>
Reset Button – A reset button helps user to clear all the data that they have entered in the text fields.<input type=“reset”>
Date – This is used for input fields that should contain a date. <input type=“date”>
Time – It allows the user to select a time. <input type=“time”>
DateTime – It allows the user to select date and time. <input type=“datetime”>
Datetime-local – It allows the user to select a date and time. <input type=“datetime-local”>
Month – It allows the user to select a month and year. <input type=“month”>
Week – It allows the user to select a week and year. <input type=“week”>
Color – It is used for input fields that should contain a color. <input type=“color”>
accept-charset Attribute
It specifies the character encodings that are to be used for the form submission.
ISO-8859-1 Character encoding for the Latin alphabet
UTF-8 Character encoding for Unicode
<form accept-charset=“UTF-8”>
Action Attribute
It contains a URL that defines where to send the data after submitting the form. It specifies the physical address of the server to which the user data should be redirected at the click of the submit button. action=http://www.something.com/something.html action=“page.html” action=“gotform.php” action=“example.asp”
If the action attribute is omitted, the action is set to the current page.
Autocomplete
On – The browser will automatically complete values based on values that the user has entered before. Off – User need to write all values each time they fill the form <form autocomplete=“on”>
enctype Attribute
It specifies how the browser encodes the data before it sends it to the server.
Value
Description
application/x-www-form-urlencoded
All characters are encoded before sent (spaces are converted to “+” symbols, and special characters are converted to ASCII HEX values)
multipart/form-data
No characters are encoded. This value is required when you are using forms that have a file upload control
text/plain
Spaces are converted to “+” symbols, but no special characters are encoded
<form enctype=“multipart/form-data”>
Method Attribute
It 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.
GET(default)
POST
GET
GET sends the data as part of the URL.
Appends form-data into the URL in name/value pairs.
The length of a URL is limited 2048 characters.
Never use GET method if you have password or other sensitive information to be sent to the server.
Useful for form submissions where a user want to bookmark the result.
GET is better for non-secure data, like query strings in Google.
GET can’t be used to send binary data, ex:- images or word documents.
<form action=“some.php” method = “GET”>
If we use an invalid value for the method attribute of the <form> tag, the browser will use the default value GET.
POST
HTTP POST requests supply additional data from the client (browser) to the server in the message body.
Appends form-data inside the body of the HTTP request (data is not shown is in URL).
The POST method does not have any restriction on data size to be sent.
Form submissions with POST cannot be bookmarked.
The POST method can be used to send ASCII as well as binary data. Ex:- image and word documents etc.
The data sent by POST method goes through HTTP header so security depends on HTTP protocol. By using Secure HTTP you can make sure that your information is secure.
POST is a little safer than GET because the parameters are not stored in browser history or in web server logs.
<form action=“some.php” method = “POST”>
GET
POST
BACK button/Reload
Harmless
Data will be re-submitted (the browser should alert the user that the data are about to be re-submitted)
Bookmarked
Can be bookmarked
Cannot be bookmarked
Cached
Can be cached
Not cached
Encoding type
application/x-www-form-urlencoded
application/x-www-form-urlencoded or multipart/form-data. Use multipart encoding for binary data
History
Parameters remain in browser history
Parameters are not saved in browser history
Restrictions on data type
Only ASCII characters allowed
No restrictions. Binary data is also allowed
Visibility
Data is visible to everyone in the URL
Data is not displayed in the URL
Name Attribute
Specifies a name used to identify the form. It is Used to give a name to the control which is sent to the server to be recognized and get the value. name=“lastname”
novalidate
If we use novalidate attribute in form tag then the validation will not take place, even if there is a required filed.