What is the HTML DOM(Document Object Model)?

The HTML DOM views an HTML document as a tree-structure. The tree structure that is defined known as a node-tree.All nodes can be accessed through the tree. Their contents can be modified or deleted, and new elements can be created.

 

Programming Interface
In the DOM, HTML documents consist of a set of node objects. The nodes can be accessed with JavaScript (Client side programming language).
The programming interface of the DOM is defined by standard properties and methods.

 

HTML DOM Properties are
x known as HTML element or object of DOM
x.innerHTML – the text value of x
x.nodeName – the name of x
x.nodeValue – the value of x
x.parentNode – the parent node of x
x.childNodes – the child nodes of x
x.attributes – the attributes nodes of x

 

HTML DOM Methods
Some simple DOM methods are
x.getElementById(id) – get the element with a specified id
x.getElementsByTagName(name) – get all elements with a specified tag name
x.appendChild(node) – insert a child node to x
x.removeChild(node) – remove a child node from x

 

The innerHTML Property
The easiest way to get or modify the content of an element is by using the innerHTML property.innerHTML is not a part of the W3C DOM specification. However, it is supported by all major browser.

 

Events
Every element on a web page has certain events which can trigger JavaScript functions. Events are normally used in combination with functions, and the function will not be executed before the event occurs!
Events examples
> A mouse click
> A web page or an image loading
> Mousing over a hot spot on the web page
> Selecting an input box in an HTML form
> Submitting an HTML form
> A keystroke

 

 

Document Object Model (DOM)

The Document Object Model (DOM) is a platform- and language-independent interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.

 

We can say It is convention for representing and interacting with objects in HTML, XHTML and XML documents.Aspects of the DOM (such as its “Elements”) may be addressed and manipulated within the syntax of the programming language in use(JavaScript or others). The public interface of a DOM is specified in its application programming interface (API) called as client side programming.

 

The HTML DOM defines a standard way for accessing and manipulating HTML documents.

 

The DOM is a W3C (World Wide Web Consortium) standard.The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.

 

In simple words : The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

 

According to the DOM, everything in an HTML document (layout) is a node.

 

DOM says that:

  • The entire document is a document node
  • Every HTML element is an element node
  • The text in the HTML elements are text nodes
  • Every HTML attribute is an attribute node
  • Comments are comment nodes

Difference between visibility:hidden and display:none

The CSS rules visibility:hidden and display:none both result in the element not being visible, then what is the difference between visibility:hidden and display:none?

 

The css properties visibility and display may seem to do the same thing on the page, but they are very different and often confuse people new to web development.

 

visibility: hidden hides the element, but it still takes up space in the layout or HTML.

 

display: none removes the element completely from the document and can allow other elements to fill in. It does not take up any type of space, even though the HTML for it is still in the source code.

Facebook Twitter and Google plus share and Like Button

Now a days in very busy life and in internet edge, social website play a very important role in friendship and social work and sharing views and idea, wishing Birthday and Anniversary.

 

Social websites now provide various API that can be implemented in websites(personal or commercial), It will provide live-streaming, sharing links etc.

 

Facebook twitter and Google plus along with LinkedIn provide us like/share button API, by implementing it, it will show a button on your webpage, the Like button lets a user share the page content with friends on social websites. When the user clicks the Like button on site, a related story appears in the user’s friends’ News Feed with a link back to website (from where a user clicked button).

 

This means when a user clicks a Like button on your page, a connection is made between webpage page and the user.

 

Facebook Like

There are two ways to Facebook Like button implementations.One is XFBML and second one is Iframe.

The XFBML dynamically re-sizes button’s height according to whether there are profile pictures to display,gives the ability to know in real time when a user clicks the Like button, and it gives the user the ability to add an optional comment to the like.

 
XFBML

[php]
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
[/php]

 
IFRAME

[php]
<iframe src="//www.facebook.com/plugins/like.php?href=<?=urlencode($yourpageurl)?>&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
[/php]

 

Twitter Share

[php]
<a href="https://twitter.com/share" data-url="<?=$yourpageurl?>" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
[/php]

 

Google plus Share

[php]
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-plusone" data-size="medium"></div>
[/php]

These are the basic code, There are so many options available on these button, a compete implementation guide available here.

 
 

Make password protect directories using .htaccess

The directory/folder password protection or authentication systems offered by the Apache Web Server are probably the most important use of .htaccess file.We can easily make a directory password protected (or multiple directory) of a website which require a username and password to access.Password are also encrypted using one of the best encryption methods available which ensures login credentials are kept secure.

How can I do? 3 simple steps to go.

 

Create a .htaccess file

Use an ASCII text editor (Binary will not work at all) like Notepad to create a text file with the following lines of contents

AuthName “Secured Area”
AuthType Basic
AuthUserFile /path/to/your/directory/.htpasswd
require valid-user

you can also update these setting according to your requirement

AuthName

Change “Secure Area” to any name that you like. This name will be displayed when the browser prompts for a password. If, e.g that area is to be accessible only to members of your site, you can name it “Members Only Area” etc.

AuthUserFile

 You will later create a file containing passwords named as .htpasswd. The “AuthUserFile” line tells the Apache web server where it can locate this password file(.htpasswd).Ideally, the password file should be placed outside any directory accessible by visitors to your website. For example, if the main page of your web site is physically located in “/home/your-website/public-html/”, place your .htpasswd file in /home/your-website/.htpasswd. That way, on the off-chance that your host misconfigures your server, your visitors cannot view the .htpasswd contents by simply typing http://www.your-website.com/.htpasswd.

Wherever you want to place the file, put the full path of that file after “AuthUserFile”. For example, if the directory where you placed the file is /home/your-website/.htpasswd, modify that line to “AuthUserFile /home/your-website/.htpasswd”. Note that your password file need not be named .htpasswd either. It can be any name you wish,but must started with .ht (as it is set in httpd.conf file)

AuthType and require

You do not have to modify these.Just copy the lines as it is.

 

Save and Upload the .htaccess file                                                                                                                                                                                                                                Save the .htaccess file.If you are using Notepad, be sure to save the file as “.htaccess”, including the quotes, otherwise Notepad will change the name to “.htaccess.txt”.Then upload the .htaccess file to the directory that you want to protect.

 

Set Up the Password File .htpasswd

username:encryptedpassword
scriptarticle:oCF9Pam/MXJg2

username:encryptedpassword
scriptarticle2:Tyuism/MXJ7t

 

where your-username is the login name of the user you want to give access. The user name should be a single word without any intervening spaces. You will then be prompted to enter the password for that user.

 

Place the .htpasswd file as the path given in .htaccess file.

Here is the way to get encrypted password.
click here to generate encrypted password.

or simple you make a .htpasswd using command line,if you have telnet,SSH access of the server.Here is the command.

htpasswd -c .htpasswd your-user-name

 

httpd.conf (Apache Server Configuration File)

Apache Server Configuration File

Apache has a great number of directives which you can set and manipulate in order to set your server’s behavior.

 

Every server administrator will often update some of the directives, it all depends on their particular needs. Every person working with the Apache server is likely to encounter these directives.

 

Apache HTTP Server is configured by placing directives in plain text configuration files, the main configuration file is usually called httpd.conf. The Apache HTTP Server configuration file is /etc/httpd/conf/httpd.conf. The httpd.conf file is well-commented and mostly self-explanatory.

 

Changes to the main configuration files are only taken by Apache only if started/restarted.It stores information on various functions of the server, which can be edited by removing or adding a number sign “#” at the beginning of the line, thus setting values for each directive.

 

Apache configuration files contain one directive per line. The backslash “\” may be used as the last character on a line to indicate that the directive continues onto the next line. There must be no other characters or white space between the backslash and the end of the line.

 

Directives in the configuration files are case-insensitive, but arguments of directives are  case sensitive. Lines that begin with the hash character “#” are considered comments, and are ignored.

 

Basic Paths of httpd.conf file in Unix/Linux system.

/var/www/conf/httpd.conf
/usr/local/apache/conf/httpd.conf
/etc/httpd/conf/httpd.conf

httpd.conf on windows

D:\xampp\apache\conf\httpd.conf

 

Let’s discuss some most basic directives of Apache Server:

 

ServerName

 

The ServerName directive is used to set the host name of the server, this is how the server identifies itself. It uses this name when responding to HTTP requests.

You can set this directive either in the server’s configuration or virtual hosts. The location of your configuration files depend on both the Apache version and Linux distribution.

[sourcecode language=”plain”]

<VirtualHost *:80>
ServerAdmin  [email protected]
DocumentRoot  /var/www
ServerName  www.examplesite.com
.
</VirtualHost>

[/sourcecode]

If the ServerName directive is not specified, the server tries to obtain it by performing a reverse DNS look-up on its IP address. You should always set a ServerName for the server explicitly; it is the only value you need to set to get your server running after installation.

 

You will have to use the IP address of your machine if you don’t yet have a registered domain name. Otherwise, you would need to add the domain name and IP address to the server’s hosts file- the same as you do with your PC’s hosts file. By doing this, the server checks its hosts file before consulting with the DNS server.

 

Assuming our domain name is www.examplesite.com and our server’s IP address is 117.220.48.20, you need to add the following line to the server’s hosts file (/etc/hosts):

[sourcecode language=”plain”]
117.220.48.20    www.examplesite.com    examplesite.com
[/sourcecode]

 

After editing the hosts file, you need to restart (or stop and start) Apache.

 

Listen

 

The Listen directive tells Apache what IP addresses and/or ports it should listen to for incoming requests. If nothing is specified, Apache listens to all addresses and ports on the machine. The default configuration sets the server to listen to port 80, the default port for HTTP communication.

 

If you only specify an IP address, the server will respond to requests coming to all ports of that address (also called an interface). If only a port number is specified, then Apache responds to requests on the specified port arriving at all interfaces on the machine. If an address and port combination is supplied, then Apache only responds to those specific interface/port combinations.

 

If your server installation has separate configuration files, you should be able to find or set this directive in the ports.conf file.

 

You can find this file in the same location as your Apache configuration files (mine is /etc/apache2/ports.conf, but that might be different for other Apache versions and/or Linux distributions).

 

Let’s assume our example site is at IP address 117.220.48.20. To set Apache to listen to ports 80 and 443, the respective default ports for HTTP and HTTPS, you need to enter the following directives in your ports.conf file:

[sourcecode language=”plain”]
Listen 117.220.48.20:80
Listen 117.220.48.20:443
[/sourcecode]

Alternatively, if you want Apache to listen to ports 80 and 443 on all interfaces regardless of the IP address, you can enter the following:

[sourcecode language=”plain”]
Listen 80
Listen 443
[/sourcecode]

 

Web User and Group

 

On Unix operating systems, it’s a good idea to configure Apache to run under a specific user and group instead of root. Doing so makes the server more secure and less vulnerable to attacks. Ideally, the user and group you set should not be able to login to the server (ie: have no login credentials) and no login shell; they will just be used for handling web client requests. Set the Apache user’s home directory to the web server’s document directory, usually located at /var/www or /usr/local/apache2/htdocs.

[sourcecode language=”plain”]
groupadd anyUserName
useradd -d /var/www  -g anyUserName -s /bin/false
[/sourcecode]

The example above uses anyUserName as our web user and group; just use a name not reserved for other processes. -d /var/www sets the home directory of the new account to /var/www, and -s /bin/false ensures the new account has no shell access. Next, you need to modify your config file to use the new Apache user and group. If yours says:

[sourcecode language=”plain”]
User ${APACHE_RUN_USER}
Group ${APACHE_RUN_GROUP}
[/sourcecode]

Then you need to find where these variables are defined and change their values. Usually, the above directive is preceded by a comment letting you know exactly where to set the new values. Otherwise, you will just insert the new user and group name in place of the old. So your final config lines could look like this:

 

[sourcecode language=”plain”]
User anyUserName
Group anyUserName
[/sourcecode]

 

ServerRoot

 

Apache’s important files, like the server’s configuration, error, and log files are kept at the top of the directory tree. This location is the ServerRoot, and you can set a different value in Apache’s main config file. Depending on your installation, the default can be something like /usr/local/apache2 or /etc/apache2. Any Apache directives using a relative path will, by default, append to the root path specified in ServerRoot.

 

When you first install your server, the configuration and log files are placed in the ServerRoot. You can change its value to a new directory, but make sure to copy the configuration files to the new location. Also, make sure you do not to add a trailing slash to the path when you modify the value.

 

ErrorLog

 

When an error occurs, Apache logs the error to a log file. The location of the error log is determined by the value specified using the ErrorLog directive. This file is critical because you will refer to it in order to debug errors, solve server configuration problems, and optimize the server.

 

If the server hosts multiple sites and you want to have separate error logs for each site, you can specify a different file and location for each site in the virtual hosts file.

 

If you don’t, then all sites’ errors are logged in the default error log, typically located at /usr/local/apache2/logs/error_log or /var/log/apache2/error.log (once again, depending on your installation).

 

Please note that the above log paths are absolute.

 

[sourcecode language=”plain”]
ErrorLog logs/error_log
[/sourcecode]

This is a relative path. Therefore, the actual error log location is $ServerRoot/logs/error_log.

 

The LogLevel directive controls the level of the messages logged in the error logs. By default, it is set to warn, meaning that all messages with the value of warning and higher (as in more critical) will be logged. You can change the value of this directive to adjust the logging level to your preference.

 

DocumentRoot

 

The DocumentRoot directive sets the location of the server’s public files, like htdocs. This is the default Apache web server document directory, and its contents are readily and publicly available to clients connecting through the web. It contains the static and dynamic content to be served once the server receives an HTTP request for them. Since files and sub-directories under htdocs are available for the public, it is very important to handle permissions correctly in order to minimize the ability to compromise the server’s safety and security.

 

Depending on your installation, the default DocumentRoot location could be something like /var/www or /usr/local/apache2/htdocs.

 

If you are hosting multiple websites on the same server, you need to set a different DocumentRoot for each site. This can be done within the respective VirtualHost directive that corresponds to each site. Let’s say you have three websites on the same server (eg: www.examplesite1.com, www.examplesite2.com, www.examplesite3.com), your virtual hosts file might look something like the following:

 

[sourcecode language=”plain”]
<VirtualHost www.examplesite1.com>
DocumentRoot  /usr/local/apache2/htdocs/example_site1
ServerName  www.examplesite1.com
.
</VirtualHost>
[/sourcecode]

To set a separate error log for each of these domains, which is really a good idea, then your virtual hosts will like this:

[sourcecode language=”plain”]

<VirtualHost www.examplesite1.com>
DocumentRoot  /usr/local/apache2/htdocs/example_site1
ServerName  www.examplesite1.com
ErrorLog  /usr/local/apache2/logs/site1_error_log
.
</VirtualHost>

<VirtualHost www.examplesite2.com>
DocumentRoot  /usr/local/apache2/htdocs/example_site2
ServerName  www.examplesite2.com
ErrorLog  /usr/local/apache2/logs/site2_error_log
.
</VirtualHost>
[/sourcecode]

 

PidFile

 

The ServerName directive is used to set the host name of the server; this is how the server identifies itself.

 

The Apache service first starts as root in order to bind to the privileged port 80 for HTTP (or 443 if using SSL) because port numbers less than 1024 are only reserved to the root user. After the initial execution, children processes spawn to handle client requests which are owned by the Apache user specified in the configuration file. For this reason, you will find one root process and multiple processes belonging to the web user; this root process is the first one initiated when Apache starts. It has a process ID, and this ID is stored in the Pid file on the server. You can control the location of the Pid file by using the PidFile directive in the configuration file.

 

If you open the file specified in the PidFile directive, you will find a number that corresponds to the parent process ID. You can stop the Apache server by killing the process using its ID number. However, kill the process only as a last resort.

 

File Inclusion

 

It is possible to separate server configuration and settings into multiple files; in fact, some Apache installations actually do so. These multiple files can then be included in the original server config file. This approach is ideal in order to keep your config file light and clear, but it also forces you to look inside multiple files residing in different locations to completely understand how Apache is configured. In any case, below is the syntax for including external config files. Whether or not you want to use file inclusion is up to you:

 

[sourcecode language=”plain”]
# Include ports listing:
Include /etc/apache2/ports.conf

# Include generic snippets of statements
Include /etc/apache2/conf.d/

# Include module configuration:
Include /etc/apache2/mods-enabled/*.load
Include /etc/apache2/mods-enabled/*.conf
[/sourcecode]

As you can see from the examples above, you can include a specific file by name, a directory (and thus all files therein), or multiple files by using wildcards.

 

Start, Stop, and Restart Apache

 

Every time you edit one of Apache’s configuration files, you need to restart (or stop and start) the service so that Apache can load the new configuration.
Otherwise, your changes will just remain on file for the next restart or server start. If your changes cause syntax errors in the configuration files, restarting will show you error messages concerning those mistakes. Additionally, the

Apache web server will not start until you fix those errors.

 

To stop the Apache server, type in the following command in the console:

[sourcecode language=”plain”]/etc/init.d/apache2 stop[/sourcecode]

To start the Apache server, type in the following command:

[sourcecode language=”plain”]/etc/init.d/apache2 start[/sourcecode]

To restart the Apache server, type in the following command:

[sourcecode language=”plain”]/etc/init.d/apache2 restart[/sourcecode]

 

Naturally, you must be logged in with a privileged user in order to execute these commands. You could, however, still run the above commands by adding sudo before each line. This basically tells the system that you are executing the command as a super user (hence the naming, sudo), in which case the system asks you to enter a password before it executes your command. If you don’t know that password, ask your server admin. Preceding the above commands with sudo:

 

[sourcecode language=”plain”]
sudo /etc/init.d/apache2 stop
sudo /etc/init.d/apache2 start
sudo /etc/init.d/apache2 restart
[/sourcecode]

 

If you have XAMPP, then you will get a User Interface to updating these directive as well as the start and stop the Apache service on a single click.

 

In the day to day of PHP programming I am sure you usually need to update these Apache directive, in the same way These above information will be helpful to you.

 

Let me know, if you need any help related to above, I’ll be glad to help you always.

Post you comment with your suggestion or queries. Thanks!