tag:blogger.com,1999:blog-29221365930259287272024-03-14T03:29:54.518-07:00Imtiaz AhmadImtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.comBlogger62125tag:blogger.com,1999:blog-2922136593025928727.post-58052233867678027592018-07-25T02:02:00.001-07:002018-07-25T02:52:04.829-07:00Install & configure docker on a fresh Linux OS<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
I am going to describe how to install docker & explain those necessary command.</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<br /></div>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: small;">
<b><span style="color: red;">Step 1:</span></b><span style="color: #222222;"> First of all we need to update our os with the latest packages.</span></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>Run:</b></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> sudo apt-get update </code></pre>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>Key points:</b></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>sudo</b> − The <i>sudo</i> command is used to ensure that the command runs with root access.</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>apt-get</b> - update the OS with the latest packages from the Internet on to the Linux system.</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>update</b> − The update option is used ensure that all packages are updated on the Linux system.</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<br />
<br /></div>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: small;">
<b><span style="color: red;">Step 2:</span></b><span style="color: #222222;"> Now time to add some certificates & transfer protocols, it will be required to work with the Docker site later on to download the necessary Docker packages.</span></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>Run:</b></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> sudo apt-get install apt-transport-https ca-certificates </code></pre>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>Key points:</b></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>apt-transport-https</b> - https download transport for APT. This package enables the usage of 'deb <a data-saferedirecturl="https://www.google.com/url?q=https://foo&source=gmail&ust=1532594219339000&usg=AFQjCNHrq5Y7Mbj4VQDNuBDUyi-DjDZruw" href="https://foo/" style="color: #1155cc;" target="_blank">https://foo</a> distro main' lines. in the /etc/apt/sources.list so that all package managers using the. libapt-pkg library can access metadata and packages available in sources. accessible over https (Hypertext Transfer Protocol Secure).</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>ca-certificates </b>- It is a digital certificate that is used to verify the identity of 3rd parties, and encrypt data between you and said 3rd party.</div>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: small;">
<div style="color: #222222;">
<br /></div>
<b><span style="color: red;">Step 3:</span></b><span style="color: #222222;"> This step is to add the Docker’s official GPG GPG key. This key is required to ensure that all data is encrypted when downloading the necessary packages for Docker.</span></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>Run:</b></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> sudo apt-key adv \ --keyserver hkp://ha.pool.sks-keyservers.net:80 \ --recv-keys 58118E89F3A912897C070ADBF76221572C52609D </code></pre>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>Key points:</b></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
The following command will download the key with the ID 58118E89F3A912897C070ADBF76221<wbr></wbr>572C52609D from the keyserver hkp://<a data-saferedirecturl="https://www.google.com/url?q=http://ha.pool.sks-keyservers.net:80&source=gmail&ust=1532594219339000&usg=AFQjCNGrXyc5rsm3kuivQZ8i5tgl8cnOog" href="http://ha.pool.sks-keyservers.net/" style="color: #1155cc;" target="_blank">ha.pool.sks-keyservers.<wbr></wbr>net:80</a> and adds it to the adv keychain. Please note that this particular key is required to download the necessary Docker packages.</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<span style="color: #33444c; font-family: "open sans" , sans-serif; font-size: 14px;">Verify that you now have the key with the fingerprint </span><code class="highlighter-rouge" style="background-color: rgba(12, 81, 118, 0.1); border-radius: 2px; box-sizing: border-box; color: rgb(12, 81, 118) !important; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12.6px; margin: 15px 0px; overflow-x: scroll; padding: 3px 7px; white-space: nowrap;">9DC8 5822 9FC7 DD38 854A E2D8 8D81 803C 0EBF CD88</code><span style="color: #33444c; font-family: "open sans" , sans-serif; font-size: 14px;">, by searching for the last 8 characters of the fingerprint.</span></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>Run:</b></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> sudo apt-key fingerprint 0EBFCD88 </code></pre>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>Returns as:</b></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> pub 4096R/0EBFCD88 2017-02-22
Key fingerprint = 9DC8 5822 9FC7 DD38 854A E2D8 8D81 803C 0EBF CD88
uid Docker Release (CE deb) <docker@docker.com>
sub 4096R/F273FCD8 2017-02-22
</code></pre>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: small;">
<div style="color: #222222;">
<br /></div>
<b><span style="color: red;">Step 4:</span> </b><span style="color: #222222;">Next, depending on the version of ubuntu you using, you need to add the relevant repository to the docker.list for the apt package manager so that it will be able to detect the docker packages from the docker site & download them accordingly.</span></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>Run:</b></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> sudo add-apt-repository \
"deb [arch=amd64] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) \
stable" </code></pre>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
Use the following command to set up the stable repository. You always need the stable repository, even if you want to install builds from the edge or test repositories as well. To add the edge or test repository, add the word edge or test (or both) after the word stable in the commands below.</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<i>Note: The lsb_release -cs sub-command below returns the name of your Ubuntu distribution, such as xenial. Sometimes, in a distribution like Linux Mint, you might need to change $(lsb_release -cs) to your parent Ubuntu distribution. For example, if you are using Linux Mint Rafaela, you could use trusty.</i></div>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: small;">
<div style="color: #222222;">
<br /></div>
<b><span style="color: red;">Step 5:</span></b><span style="color: #222222;"> </span><span style="color: #33444c; font-family: "open sans" , sans-serif; font-size: 14px;">Update the </span><code class="highlighter-rouge" style="background-color: rgba(12, 81, 118, 0.1); border-radius: 2px; box-sizing: border-box; color: #0c5176; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 12.6px; margin: 15px 0px; overflow-x: scroll; padding: 3px 7px; white-space: nowrap;">apt</code><span style="color: #33444c; font-family: "open sans" , sans-serif; font-size: 14px;"> package index.</span></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>Update packages:</b></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> sudo apt-get update
</code></pre>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<br /></div>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: small;">
<b><span style="color: red;">Step 6:</span></b><span style="color: #222222;"> Install the latest version of Docker CE</span><br />
<div style="color: #222222;">
<b>Run:</b></div>
</div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> sudo apt-get install docker-ce </code></pre>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<i>Alternative:</i></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
(If you want to install a certain version of docker ce then list that available versions in the repo, then select and install:</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
Listing version madison version of docker ce:</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>Run:</b></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> apt-cache madison docker-ce
</code></pre>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<i>To run each command of docker without 'sudo' docker will throw an error like:</i></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.27/containers/json: dial unix /var/run/docker.sock: connect: permission denied
</code></pre>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>Solution:</b></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
The error message tells you that your current user can’t access the docker engine, because you’re lacking permissions to access the unix socket to communicate with the engine.</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
As a temporary solution, you can use <i>sudo</i> to run the failed command as root.</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
However it is recommended to fix the issue by adding the current user to the docker group:</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
Run this command in your favourite shell and then completely log out of your account and log back in (<i>if in doubt, reboot!</i>):</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>Run:</b></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> sudo usermod -a -G docker $USER
</code></pre>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
Reboot your pc to ensure commands are running with right permission.<br />
<br /></div>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: small;">
<b><span style="color: red;">Testing Step:</span></b></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>To test docker is running perfectly or not, Run:</b></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> docker --version </code></pre>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<b>More testing, Run a container:</b></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> sudo docker run hello-world
</code></pre>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
It will for look in local if that repo is available in local or not, if not it will download it from docker hub & you are all set to go with docker! :D</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
Sources:</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<a data-saferedirecturl="https://www.google.com/url?q=https://docs.docker.com/install/linux/docker-ce/ubuntu/&source=gmail&ust=1532594219339000&usg=AFQjCNG2FAHog7Nw-B-C5UKNKzpoAPbcVQ" href="https://docs.docker.com/install/linux/docker-ce/ubuntu/" style="color: #1155cc;" target="_blank">https://docs.docker.com/<wbr></wbr>install/linux/docker-ce/<wbr></wbr>ubuntu/</a></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<a data-saferedirecturl="https://www.google.com/url?q=https://techoverflow.net/2017/03/01/solving-docker-permission-denied-while-trying-to-connect-to-the-docker-daemon-socket/&source=gmail&ust=1532594219339000&usg=AFQjCNEH9yGxp6yB9AObEWt9Of_OtrGJJA" href="https://techoverflow.net/2017/03/01/solving-docker-permission-denied-while-trying-to-connect-to-the-docker-daemon-socket/" style="color: #1155cc;" target="_blank">https://techoverflow.net/2017/<wbr></wbr>03/01/solving-docker-<wbr></wbr>permission-denied-while-<wbr></wbr>trying-to-connect-to-the-<wbr></wbr>docker-daemon-socket/</a></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<a data-saferedirecturl="https://www.google.com/url?q=https://www.tutorialspoint.com/docker/installing_docker_on_linux.htm&source=gmail&ust=1532594219339000&usg=AFQjCNH9E1vystqa3wW7cRczDbFDZvJ9Vg" href="https://www.tutorialspoint.com/docker/installing_docker_on_linux.htm" style="color: #1155cc;" target="_blank">https://www.tutorialspoint.<wbr></wbr>com/docker/installing_docker_<wbr></wbr>on_linux.htm</a></div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<a data-saferedirecturl="https://www.google.com/url?q=https://docs.google.com/document/d/1MliPTr0l5nmkRRyhAwYoD70IYqiHEebJ6w7TUsXCF8c/edit&source=gmail&ust=1532594219339000&usg=AFQjCNFCcMA5VjQM-RyNXZoEX5-SC5fy9g" href="https://docs.google.com/document/d/1MliPTr0l5nmkRRyhAwYoD70IYqiHEebJ6w7TUsXCF8c/edit" style="color: #1155cc;" target="_blank">https://docs.google.com/<wbr></wbr>document/d/<wbr></wbr>1MliPTr0l5nmkRRyhAwYoD70IYqiHE<wbr></wbr>ebJ6w7TUsXCF8c/edit</a></div>
</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-76195940866854770582018-07-23T22:50:00.002-07:002018-07-25T03:29:02.488-07:00Upgrade Ubuntu OS version 14.0 / 16.04 / 18.04<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">We can upgrade our ubuntu os very easily with a few steps, I will mention here three step today:</span><br />
<ol style="text-align: left;">
<li><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">Using command line.</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">Using a bootable device pendrive/harddisk/cd</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">Using ubuntu interface</span></li>
</ol>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></span><br />
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;"><span style="font-family: inherit;"><b><span style="color: red;">1. Using command line:</span></b></span></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">1. To upgrade to Ubuntu 18.04, first run the following command to upgrade existing software.<span style="font-family: "arial" , "helvetica" , sans-serif;"><i>sudo apt update && sudo apt dist-upgrade</i></span><span style="font-family: "arial" , "helvetica" , sans-serif;">2. Then make sure you have update-manager-core package installed.</span><span style="font-family: "arial" , "helvetica" , sans-serif;"><i>sudo apt install update-manager-core</i></span><span style="font-family: "arial" , "helvetica" , sans-serif;">3. After that, run the following command to begin the upgrade process.</span><span style="font-family: "arial" , "helvetica" , sans-serif;"><i>do-release-upgrade</i></span><span style="font-family: "arial" , "helvetica" , sans-serif;">4. Then follow the on-screen instruction to upgrade to Ubuntu 18.04. Once the upgrade is finished, reboot your Ubuntu desktop or server. To check your Ubuntu version, run:</span></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span><i>lsb_release -a</i></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><i><br /></i></span></div>
<span style="font-family: inherit; font-size: xx-small;">Output:</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><i>No LSB modules are available.</i></span></span><br />
<br />
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></span></div>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;"><i>Distributor ID: Ubuntu</i></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;"><i>Description: Ubuntu 18.04 LTS</i></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;"><i>Release: 18.04</i></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;"><i>Codename: bionic</i></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">You also need to re-enable third-party repositories such as PPA because they are disabled during upgrade.</span></span><br />
<span style="font-family: inherit; font-size: xx-small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></span>
<span style="font-family: inherit; font-size: xx-small;"><span style="color: red; font-family: "arial" , "helvetica" , sans-serif;"><b>2. Using a bootable device pendrive/harddisk/cd</b></span></span><br />
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: xx-small;">We will follow some steps to upgrade ubuntu os via bootable device</span></span></div>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">1. Restart your pc & keep press F12 button continiously it will open up the BIOS of you device</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">2. Enable boot from usb port</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">3. Make your pendrive/hd bootable</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">4. Download a version of ubuntu from the ubuntu website & put that directly in your bootabe device</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">5. Put the bootable device in any of your usb port & restart your pc, keep pressing F12 & select the 6. device you want to boot from then hit enter button</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">6. Then follow the on-screen instruction to upgrade</span><br />
<ol style="text-align: left;">
</ol>
<br />
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: xx-small;"><br /></span></span></div>
<div style="text-align: left;">
<b><span style="color: red;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: xx-small;">3. </span></span><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">Using ubuntu interface</span></span></b></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">1. We can update ubuntu version as easily as an android app update by os interface.</span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;"><br /></span></div>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">2. search for Software & Updates… then select it to open, </span><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">Set 'Notify me of a new Ubuntu version' as 'For any new version'</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">3. Before upgrading Ubuntu you should always make sure the desktop is updated with the latest packages… This is the standard process. To update Ubuntu packages, open Dash again and search for Software Updater, then select to open it, when open it click on the 'Install Now' button.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;"><br /></span>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: xx-small;">4. Now click on ALT+F2 at once, it allows to run a ubuntu command. Run there as 'update-manager -cd' After that, it should open the upgrade wizard to upgrade Ubuntu, Click the Upgrade button to begin the wizard… follow the on-screen instructions and continue</span><br />
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: x-small;"><br /></span></div>
</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-30739174962575744162017-05-07T04:07:00.001-07:002017-05-07T04:19:52.666-07:00React component lifecycle<div dir="ltr" style="text-align: left;" trbidi="on">
<div align="center" class="MsoNoSpacing" style="text-align: center;">
<b><span style="font-family: "vrinda" , sans-serif; font-size: 14.0pt;">ReactJs Life Cycle<o:p></o:p></span></b></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<b><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">Component lifecycle</span></b><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">বলতে বোঝায়, একটি </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">React component <span lang="BN">এ যে সমস্ত ডিফল্ট ফাংশান থাকে তার ঠিক কোনটার পর কোনটা এক্সিকিউট হয়। উদাহরণ হিসাবে বলা যায় কোন </span>class <span lang="BN">যখন এক্সিকিউট হয় তখন <b>_</b></span><b>construct</b> <span lang="BN">ফাংশানটি সবার আগে এক্সিকিউট হয় এবং </span><b>_destruct </b><span lang="BN">ফাংশান ওই </span>class <span lang="BN">এর অন্যসব ফাংশান এক্সিকিউট হওয়ার শেষে এক্সিকিউট হয়।<br />
ঠিক তেমনিভাবে যখন কোন </span>React component <span lang="BN">এক্সিকিউট হয় তখন অন্য সব ফাংশান এক্সিকিউট হওয়ার আগে </span></span><b><span style="background: white; font-family: "vrinda" , sans-serif; font-size: 12pt;">componentWillMount() </span></b><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">এক্সিকিউট হয়।<o:p></o:p></span></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">Component render <span lang="BN">হওয়ার সময় যে </span>order <span lang="BN">অনুযায়ী </span>component <span lang="BN">এর ফাংশানগুলো এক্সিকিউট হয় সেই </span>Order <span lang="BN">অনুযায়ী অন্য ফাংশানগুলো বর্ননা করবো।<o:p></o:p></span></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: "wingdings"; font-size: 12pt;">Ø<span style="font-family: "times new roman"; font-size: 7pt; font-stretch: normal; line-height: normal;"> </span></span><!--[endif]--><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">১</span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">)</span><b><span style="background: white; font-family: "vrinda" , sans-serif; font-size: 12pt;">componentWillMount</span></b><span class="apple-converted-space"><span style="background: white; font-family: "vrinda" , sans-serif; font-size: 12pt;"> </span></span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">এক্সিকিউট</span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">হয়</span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"> render() </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">ফাংশান</span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">এক্সিকিউট</span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">হওয়ার</span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">আগে</span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">, </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">ঠিক</span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">যখন</span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"> component </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">টি</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">তার</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">parent component </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">এর</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">সাথে</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">mount </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">হয়</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">তার</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">আগে।<span style="background: white;"><o:p></o:p></span></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: "wingdings"; font-size: 12.0pt;">Ø<span style="font-family: "times new roman"; font-size: 7pt; font-stretch: normal; line-height: normal;"> </span></span><!--[endif]--><span lang="BN" style="background: white; font-family: "vrinda" , sans-serif; font-size: 12pt;">২)</span><b><span style="background: white; font-family: "vrinda" , sans-serif; font-size: 12pt;">componentDidMount </span></b><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">এক্সিকিউট</span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">হয়</span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"> component </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">টি</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">তার</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">parent component </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">এর</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">সাথে</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">mount </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">হয়ে</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">যাওয়ার</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">পর।</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">এখানেই</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">সাধারণত</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">state </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">আপডেট</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">করতে</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">হয়</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">component </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">টি</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">usable </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">করার</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">জন্যে।</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">এছাড়াও</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">ajax request </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">এর</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">মাধ্যমে</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">ডাটা</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">কালেকশান</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">এখানেই</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">করতে</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">হয়</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">Component </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">এ</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">ইউজ</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">করার</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">জন্য।</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">তাহলে</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">মোটকথা</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">component </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">টি</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">ইউজ</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">করার</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">উপযোগী</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">করতে</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">যা</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">কিছু</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">করা</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">দরকার</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">এই</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">ফাংশানেই</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">করা</span><span dir="RTL"></span><span dir="RTL"></span><span dir="RTL" lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">হয়।</span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: "wingdings"; font-size: 12.0pt;">Ø<span style="font-family: "times new roman"; font-size: 7pt; font-stretch: normal; line-height: normal;"> </span></span><!--[endif]--><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">৩)</span><b><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">componentWillReceiveProps</span></b><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"> <span lang="BN">এক্সিকিউট হয় কোন </span>child component <span lang="BN">এ তার </span>parent component <span lang="BN">যখন </span>props <span lang="BN">গুলো </span>push <span lang="BN">করে তার ঠিক আগেই। এবং সেটা </span>child component <span lang="BN">টি ২য় বার </span>render <span lang="BN">হওয়ার আগেই।</span><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: "wingdings"; font-size: 12.0pt;">Ø<span style="font-family: "times new roman"; font-size: 7pt; font-stretch: normal; line-height: normal;"> </span></span><!--[endif]--><span lang="BN" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">৪)</span><b><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">shouldComponentUpdate</span></b><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"> <span lang="BN">ফাংশানটি রিটার্ন করে </span>True <span lang="BN">অথবা </span>False, <span lang="BN">বাই ডিফল্ট এটি সব সময় ট্রু রিটার্ন করে। যখনই কোন </span>component <span lang="BN">আপডেট করার প্রয়োজন হয় সেটা </span>State <span lang="BN">অথবা </span>Props <span lang="BN">চেঞ্জ করার কারণে হোক তখনই </span>shouldComponentUpdate <span lang="BN">ফাংশানটি এক্সিকিউট হয়। কোন কারণে প্রোগ্রামার যদি মনে করে তার এই কমপোনেন্টটি আপডেট করার কোন প্রয়োজন নেই তাহলে সে </span>shouldComponentUpdate <span lang="BN">ফাংশানটির মধ্যে থেকে </span>False <span lang="BN">রিটার্ন করে রাখতে পারে।</span><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: "wingdings"; font-size: 12pt;">Ø<span style="font-family: "times new roman"; font-size: 7pt; font-stretch: normal; line-height: normal;"> </span></span><!--[endif]--><b><span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12pt;">৫) </span></b><b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">componentWillUpdate</span></b><span class="apple-converted-space"><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"> </span></span><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">Render <span lang="AR-SA">ফাংশানটি কল হওয়ার ঠিক আগেই এবং </span>shouldComponentUpdate <span lang="AR-SA">ফাংশানটি এক্সিকিউট হওয়ার পরেই </span>componentWillUpdate <span lang="AR-SA">ফাংশানটি এক্সিকিউট হয়।</span><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: "wingdings"; font-size: 12pt;">Ø<span style="font-family: "times new roman"; font-size: 7pt; font-stretch: normal; line-height: normal;"> </span></span><!--[endif]--><span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12pt;">৬)</span><b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">render()</span></b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"> <span lang="AR-SA">রেন্ডার ফাংশান এক্সিকিউট হয়ে </span>childComponet <span lang="AR-SA">টি ঠিক যে কারণে ইউজ করা করা হচ্ছে সেই কাজটিই করে থাকে। এটি তার </span>parent component <span lang="AR-SA">কে </span>HTML <span lang="AR-SA">রিটার্ন করে।<o:p></o:p></span></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: "wingdings"; font-size: 12pt;">Ø<span style="font-family: "times new roman"; font-size: 7pt; font-stretch: normal; line-height: normal;"> </span></span><!--[endif]--><b><span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12pt;">৭) </span></b><b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">componentDidUpdate</span></b><span class="apple-converted-space"><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"> </span></span><span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12pt;">এক্সিকিউট হয় </span><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">render <span lang="AR-SA">ফাংশান কল হওয়ার পরেই। </span><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: "wingdings"; font-size: 12.0pt;">Ø<span style="font-family: "times new roman"; font-size: 7pt; font-stretch: normal; line-height: normal;"> </span></span><!--[endif]--><b><span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12pt;">৮) </span></b><b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">componentWillUnmount</span></b><span class="apple-converted-space"><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"> </span></span><span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12pt;">কোন কম্পোনেন্ট এর কাজ যখন শেষ হয়ে যায় তখন সেটি তার </span><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">parent component <span lang="AR-SA">থেকে </span>unmount <span lang="AR-SA">হয়ে যায়। এবং এটি</span></span><span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">ই কোন একটা ফাংশানে ইউজ করা </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">function <span lang="AR-SA">গুলোর সবার শেষে এক্সিকিউট হয়।</span><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">আরো ক্লিয়ার আইডিয়ার জন্যে আমরা কয়েকটি ভাগে ভাগ করতে পারি যেমন যখন কোন </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">component <b>Initially Call </b><span lang="AR-SA">হয় তখন কোন-কোন লাইফসাইকেল মেথড কল হয় এবং তাদের কোনটির পর কোনটি কল হয়। </span><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">যখন কোন </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">component <span lang="AR-SA">এর কোন </span><b>state change</b> <span lang="AR-SA">হয় তখন কোন-কোন লাইফসাইকেল মেথড কল হয় এবং তাদের কোনটির পর কোনটি কল হয়।</span><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">যখন কোন </span><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">component <span lang="AR-SA">এর কোন </span><b>props change </b><span lang="AR-SA">হয় তখন কোন-কোন লাইফসাইকেল মেথড কল হয় এবং তাদের কোনটির পর কোনটি কল হয়।</span><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<b><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;">Initially Call<o:p></o:p></span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxGmrEw-1euz_cDUgU26yzsCy4uFeCNSRt4JvJ-N8RsBXNAhduzysrIl5C_ICAYK2CCaRpcHBMoHB-PbbyHynuPWh81RpnzXuGXSQehAe3BnseNbF6wypU0zynT6HeQj6webJHf9o9cH0/s1600/lifecycle_init.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxGmrEw-1euz_cDUgU26yzsCy4uFeCNSRt4JvJ-N8RsBXNAhduzysrIl5C_ICAYK2CCaRpcHBMoHB-PbbyHynuPWh81RpnzXuGXSQehAe3BnseNbF6wypU0zynT6HeQj6webJHf9o9cH0/s640/lifecycle_init.png" width="640" /></a></div>
<div class="MsoNoSpacing">
<b><span style="font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><br />
</span></b></div>
<div class="MsoNoSpacing">
<span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"><!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600"
o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f"
stroked="f"> <v:stroke joinstyle="miter"/> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0"/> <v:f eqn="sum @0 1 0"/> <v:f eqn="sum 0 0 @1"/> <v:f eqn="prod @2 1 2"/> <v:f eqn="prod @3 21600 pixelWidth"/> <v:f eqn="prod @3 21600 pixelHeight"/> <v:f eqn="sum @0 0 1"/> <v:f eqn="prod @6 1 2"/> <v:f eqn="prod @7 21600 pixelWidth"/> <v:f eqn="sum @8 21600 0"/> <v:f eqn="prod @7 21600 pixelHeight"/> <v:f eqn="sum @10 21600 0"/> </v:formulas> <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/> <o:lock v:ext="edit" aspectratio="t"/> </v:shapetype><v:shape id="Picture_x0020_1" o:spid="_x0000_i1027" type="#_x0000_t75"
style='width:468pt;height:185.25pt;visibility:visible;mso-wrap-style:square'> <v:imagedata src="file:///C:/Users/Imtiaz/AppData/Local/Temp/msohtmlclip1/01/clip_image001.png"
o:title=""/> </v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12pt;">উপরের ইমেজটিতে যেমন দেখতে পাচ্ছেন যখন ই কোন </span><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">component <span lang="AR-SA">কে কল করা হয় ফাংশানগুলি একটির পর একটি কল হতে থাকে।</span><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">GetDefaultProps <span lang="AR-SA">এই ফাংশানটিতে </span>component <span lang="AR-SA">টি তে </span>used props <span lang="AR-SA">গুলোর টাইপ বলে দেওয়া থাকে যেমন কোন </span>props string <span lang="AR-SA">হবে না কি </span>integer <span lang="AR-SA">হবে।</span><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12pt;">ঠিক একই ভাবে </span><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">GetInitialState <span lang="AR-SA">এ </span>component <span lang="AR-SA">এ </span>used states <span lang="AR-SA">গুলোর জন্যর </span>initial state <span lang="AR-SA">নির্ধারন করে দেওয়া হয়। বলে রাখা ভালো এখানে কোন </span>Initial state <span lang="AR-SA">সেট করলে তাতে </span>component re-render <span lang="AR-SA">হয় না।</span><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">ComponentWillMoun</span></b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">t, Render <span lang="AR-SA">এবং </span><b>ComponentDidMount</b> <span lang="AR-SA">ফাংশানগুলির ব্যাপারে আগেই বর্ননা করেছি।</span><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">When state changes<o:p></o:p></span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBUre8iRyDsSrJwA9CXjtMfNSYZC3oGXAY69Vxf7tm_PuIBAKv9wSD0Ub-qajICjzyGYvLOZNUhP2FE8sZJhLHRtBsNWoQDJecdbTPd4PNxT3MYp8nCYz5a-U8eCFdcwYTPPctfu33oo4/s1600/lifecycle_state.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBUre8iRyDsSrJwA9CXjtMfNSYZC3oGXAY69Vxf7tm_PuIBAKv9wSD0Ub-qajICjzyGYvLOZNUhP2FE8sZJhLHRtBsNWoQDJecdbTPd4PNxT3MYp8nCYz5a-U8eCFdcwYTPPctfu33oo4/s640/lifecycle_state.png" width="640" /></a></div>
<div class="MsoNoSpacing">
<b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"><br />
</span></b></div>
<div class="MsoNoSpacing">
<span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"><!--[if gte vml 1]><v:shape id="Picture_x0020_2" o:spid="_x0000_i1026"
type="#_x0000_t75" style='width:468pt;height:155.25pt;visibility:visible;
mso-wrap-style:square'> <v:imagedata src="file:///C:/Users/Imtiaz/AppData/Local/Temp/msohtmlclip1/01/clip_image003.png"
o:title=""/> </v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12pt;">ছবিতে যেমনটি দেখতে পাচ্ছেন, যখন কোন </span><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">component <span lang="AR-SA">এর কোন </span>state change <span lang="AR-SA">করা হয় তখন ফাংশানগুলি একটির পরে অন্যটি ক্রমান্বয়ে এক্সিকিউট হয়ে থাকে। ফাংশানগুলি কিভাবে কাজ করে তার বর্ননা উপরে আগেই করেছি।</span><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">When Props Changes<o:p></o:p></span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzf0jBXHiZdNDHbcAPDR0lxj1SQmFSXhQxyDSPQuzxezlyLGVInLG3zd3bGw5mkr-bw7jsL477QIYtFb3QYU3N6Bp68EoUkvSUcw5houBANab-fUM1njiLMQyy95VutIEVBlkixa10ues/s1600/lifecycle_props.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzf0jBXHiZdNDHbcAPDR0lxj1SQmFSXhQxyDSPQuzxezlyLGVInLG3zd3bGw5mkr-bw7jsL477QIYtFb3QYU3N6Bp68EoUkvSUcw5houBANab-fUM1njiLMQyy95VutIEVBlkixa10ues/s640/lifecycle_props.png" width="640" /></a></div>
<div class="MsoNoSpacing">
<b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"><br />
</span></b></div>
<div class="MsoNoSpacing">
<b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"><!--[if gte vml 1]><v:shape
id="Picture_x0020_3" o:spid="_x0000_i1025" type="#_x0000_t75" style='width:468pt;
height:180pt;visibility:visible;mso-wrap-style:square'> <v:imagedata src="file:///C:/Users/Imtiaz/AppData/Local/Temp/msohtmlclip1/01/clip_image005.png"
o:title=""/> </v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></b><b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"><o:p></o:p></span></b></div>
<div class="MsoNoSpacing">
<span lang="AR-SA" style="font-family: "vrinda" , sans-serif; font-size: 12pt;">ছবিতে যেমনটি দেখতে পাচ্ছেন, যখন কোন </span><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">component <span lang="AR-SA">এর কোন </span>state change <span lang="AR-SA">করা হয় তখন ফাংশানগুলি একটির পরে অন্যটি ক্রমান্বয়ে এক্সিকিউট হয়ে থাকে। ফাংশানগুলি কিভাবে কাজ করে তার বর্ননা উপরে আগেই করেছি।</span><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">Demo Code: </span><u><span style="color: #2e75b6; font-family: "vrinda" , sans-serif; font-size: 12.0pt;">https://github.com/imtiazUAP/react_scratch/tree/develop-1/learning/reactComponent_lifeCycle</span></u><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;">Resources:</span></b><span style="font-family: "vrinda" , sans-serif; font-size: 12pt;"><br />
</span><u><span style="color: #2e75b6; font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><a href="https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle.htm"><span style="color: #2e75b6; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: #2E75B6; mso-style-textfill-fill-colortransforms: lumm=75000; mso-style-textfill-fill-themecolor: accent1; mso-themecolor: accent1; mso-themeshade: 191;">https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle.htm</span></a><o:p></o:p></span></u></div>
<div class="MsoNoSpacing">
<u><span style="color: #2e75b6; font-family: "vrinda" , sans-serif; font-size: 12.0pt;"><a href="http://busypeoples.github.io/post/react-component-lifecycle/"><span style="color: #2e75b6; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: #2E75B6; mso-style-textfill-fill-colortransforms: lumm=75000; mso-style-textfill-fill-themecolor: accent1; mso-themecolor: accent1; mso-themeshade: 191;">http://busypeoples.github.io/post/react-component-lifecycle/</span></a><o:p></o:p></span></u></div>
<br />
<div class="MsoNoSpacing">
<u><span style="color: #2e75b6; font-family: "vrinda" , sans-serif; font-size: 12.0pt;">https://facebook.github.io/react/docs/react-component.html<span lang="AR-SA"><o:p></o:p></span></span></u></div>
</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-86179463168974861772017-04-05T03:57:00.000-07:002017-04-05T03:57:07.118-07:00Dynamic dropdown list in reactJs<div dir="ltr" style="text-align: left;" trbidi="on">
<forminput p=""><span class="Apple-tab-span" style="white-space: pre;"> </span>type="vertical"<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>control="select"<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>id="number-of-devices"<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>label="Number of devices"<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>required={true}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>value={this.state.devices}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>onChange={e => this.setState({devices: e.target.value})}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>options={this.getDevices()}<br />
/><br />
<br />
getDevices() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>let i = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>let devices = [];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>while (i <= this.props.pay.number_of_devices) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> devices.push({label: i, value: i})<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> i++;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return devices;<br />
}<br />
<br /></forminput></div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-92036367521024381442017-01-08T09:39:00.002-08:002017-01-08T09:42:39.532-08:00Starting with Webpack<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; border-width: 0px 0px 1px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 30px; font-weight: 500; line-height: 1.1; margin: 20px 0px 10px; outline: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">
INSTALLING WEBPACK</h1>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
You need to have <a href="https://nodejs.org/" style="border: 0px; color: #006a86; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">node.js</a> installed.</div>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; margin-bottom: 10px; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">$ npm install webpack -g</code></pre>
<blockquote style="background-color: #f9f9f9; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; border-width: 0px 0px 0px 5px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; font-style: italic; margin: 0.5em 0px 1em; outline: 0px; padding: 5px 20px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
This makes the webpack command available.</div>
</blockquote>
<hr style="background-color: white; border-bottom: none; border-image: initial; border-left: none; border-right: none; border-top-color: rgb(153, 153, 153); border-top-style: dashed; color: white; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; height: 1px; margin-bottom: 20px; margin-top: 20px;" />
<h1 style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; border-width: 0px 0px 1px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 30px; font-weight: 500; line-height: 1.1; margin: 20px 0px 10px; outline: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">
SETUP THE COMPILATION</h1>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
Start with a empty directory.</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
Create these files:</div>
<div class="panel panel-add" style="background-color: #dff0d8; border-radius: 4px; border: 1px solid rgb(214, 233, 198); box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px; color: #468847; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<h3 class="panel-title" style="border-bottom-color: transparent; border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: initial; border-width: 0px 0px 1px; font-size: 1pc; font-style: inherit; font-weight: 500; line-height: 1.1; margin: 0px; outline: 0px; padding: 10px 15px; vertical-align: baseline;">
add <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; color: #333333; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">entry.js</code></h3>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">document.write("It works.");</code></pre>
</div>
<div class="panel panel-add" style="background-color: #dff0d8; border-radius: 4px; border: 1px solid rgb(214, 233, 198); box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px; color: #468847; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<h3 class="panel-title" style="border-bottom-color: transparent; border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: initial; border-width: 0px 0px 1px; font-size: 1pc; font-style: inherit; font-weight: 500; line-height: 1.1; margin: 0px; outline: 0px; padding: 10px 15px; vertical-align: baseline;">
add <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; color: #333333; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">index.html</code></h3>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><span class="tag" style="border: 0px; color: navy; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">html</span>></span>
<span class="tag" style="border: 0px; color: navy; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">head</span>></span>
<span class="tag" style="border: 0px; color: navy; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">meta</span> <span class="attribute" style="border: 0px; color: teal; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">charset</span>=<span class="value" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"utf-8"</span>></span>
<span class="tag" style="border: 0px; color: navy; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">head</span>></span>
<span class="tag" style="border: 0px; color: navy; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">body</span>></span>
<span class="tag" style="border: 0px; color: navy; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">script</span> <span class="attribute" style="border: 0px; color: teal; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">type</span>=<span class="value" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"text/javascript"</span> <span class="attribute" style="border: 0px; color: teal; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">src</span>=<span class="value" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"bundle.js"</span> <span class="attribute" style="border: 0px; color: teal; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">charset</span>=<span class="value" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"utf-8"</span>></span><span class="javascript" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></span><span class="tag" style="border: 0px; color: navy; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">script</span>></span>
<span class="tag" style="border: 0px; color: navy; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">body</span>></span>
<span class="tag" style="border: 0px; color: navy; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">html</span>></span></code></pre>
</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
Then run the following:</div>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; margin-bottom: 10px; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">$ webpack ./entry.js bundle.js</code></pre>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
It will compile your file and create a bundle file.</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
If successful it displays something like this:</div>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; margin-bottom: 10px; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Version: webpack 1.14.0
Time: 12ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
chunk {0} bundle.js (main) 28 bytes [rendered]
[0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]</code></pre>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
Open <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">index.html</code> in your browser. It should display <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">It works.</code></div>
<span style="background-color: white; color: #333333; font-family: helvetica, arial, freesans, clean, sans-serif; font-size: 30px; text-transform: uppercase;"><br /></span>
<span style="background-color: white; color: #333333; font-family: helvetica, arial, freesans, clean, sans-serif; font-size: 30px; text-transform: uppercase;">SECOND FILE</span><a href="https://www.blogger.com/null" id="installing-webpack" style="background-color: white; border: 0px; color: #006a86; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><br />
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
Next, we will move some code into an extra file.</div>
<div class="panel panel-add" style="background-color: #dff0d8; border-radius: 4px; border: 1px solid rgb(214, 233, 198); box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px; color: #468847; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<h3 class="panel-title" style="border-bottom-color: transparent; border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: initial; border-width: 0px 0px 1px; font-size: 1pc; font-style: inherit; font-weight: 500; line-height: 1.1; margin: 0px; outline: 0px; padding: 10px 15px; vertical-align: baseline;">
add <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; color: #333333; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">content.js</code></h3>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">module.<span class="built_in" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">exports</span> = <span class="string" style="border: 0px; color: #dd1144; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"It works from content.js."</span>;</code></pre>
</div>
<div class="panel panel-update" style="background-color: #d9edf7; border-radius: 4px; border: 1px solid rgb(188, 232, 241); box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px; color: #3a87ad; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<h3 class="panel-title" style="border-bottom-color: transparent; border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: initial; border-width: 0px 0px 1px; font-size: 1pc; font-style: inherit; font-weight: 500; line-height: 1.1; margin: 0px; outline: 0px; padding: 10px 15px; vertical-align: baseline;">
update <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; color: #333333; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">entry.js</code></h3>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><div class="deletion" style="background: rgb(255, 221, 221); border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
- document.write(<span class="string" style="border: 0px; color: #dd1144; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"It works."</span>);</div>
<div class="addition" style="background: rgb(221, 255, 221); border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
+ document.write(<span class="built_in" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">require</span>(<span class="string" style="border: 0px; color: #dd1144; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"./content.js"</span>));</div>
</code></pre>
</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
And recompile with:</div>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; margin-bottom: 10px; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">$ webpack ./entry.js bundle.js</code></pre>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
Update your browser window and you should see the text <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">It works from content.js.</code>.</div>
<a href="https://www.blogger.com/null" id="second-file" style="background-color: white; border: 0px; color: #006a86; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><span style="background-color: #f9f9f9; color: #333333; font-family: inherit; font-size: 16px; font-style: inherit; font-weight: inherit;">webpack will analyze your entry file for dependencies to other files. These files (called modules) are included in your </span><code style="background-color: whitesmoke; border-radius: 4px; border: 0px; color: #333333; font-family: "ubuntu mono", "courier new", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">bundle.js</code><span style="background-color: #f9f9f9; color: #333333; font-family: inherit; font-size: 16px; font-style: inherit; font-weight: inherit;"> too. webpack will give each module a unique id and save all modules accessible by id in the </span><code style="background-color: whitesmoke; border-radius: 4px; border: 0px; color: #333333; font-family: "ubuntu mono", "courier new", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">bundle.js</code><span style="background-color: #f9f9f9; color: #333333; font-family: inherit; font-size: 16px; font-style: inherit; font-weight: inherit;"> file. Only the entry module is executed on startup. A small runtime provides the </span><code style="background-color: whitesmoke; border-radius: 4px; border: 0px; color: #333333; font-family: "ubuntu mono", "courier new", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">require</code><span style="background-color: #f9f9f9; color: #333333; font-family: inherit; font-size: 16px; font-style: inherit; font-weight: inherit;"> function and executes the dependencies when required.</span><br />
<hr style="background-color: white; border-bottom: none; border-image: initial; border-left: none; border-right: none; border-top-color: rgb(153, 153, 153); border-top-style: dashed; color: white; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; height: 1px; margin-bottom: 20px; margin-top: 20px;" />
<h1 style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; border-width: 0px 0px 1px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 30px; font-weight: 500; line-height: 1.1; margin: 20px 0px 10px; outline: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">
THE FIRST LOADER</h1>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
We want to add a CSS file to our application.</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
webpack can only handle JavaScript natively, so we need the <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">css-loader</code> to process CSS files. We also need the <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">style-loader</code> to apply the styles in the CSS file.</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
Run <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">npm install css-loader style-loader</code> to install the loaders. (They need to be installed locally, without <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">-g</code>) This will create a <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">node_modules</code> folder for you, in which the loaders will live.</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
Let’s use them:</div>
<div class="panel panel-add" style="background-color: #dff0d8; border-radius: 4px; border: 1px solid rgb(214, 233, 198); box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px; color: #468847; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<h3 class="panel-title" style="border-bottom-color: transparent; border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: initial; border-width: 0px 0px 1px; font-size: 1pc; font-style: inherit; font-weight: 500; line-height: 1.1; margin: 0px; outline: 0px; padding: 10px 15px; vertical-align: baseline;">
add <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; color: #333333; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">style.css</code></h3>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><span class="tag" style="border: 0px; color: navy; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">body</span> <span class="rules" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">{
<span class="rule" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: teal; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">background</span>:<span class="value" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> yellow</span></span>;
<span class="rule" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span></span></code></pre>
</div>
<div class="panel panel-update" style="background-color: #d9edf7; border-radius: 4px; border: 1px solid rgb(188, 232, 241); box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px; color: #3a87ad; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<h3 class="panel-title" style="border-bottom-color: transparent; border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: initial; border-width: 0px 0px 1px; font-size: 1pc; font-style: inherit; font-weight: 500; line-height: 1.1; margin: 0px; outline: 0px; padding: 10px 15px; vertical-align: baseline;">
update <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; color: #333333; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">entry.js</code></h3>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><div class="addition" style="background: rgb(221, 255, 221); border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
+ <span class="built_in" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">require</span>(<span class="string" style="border: 0px; color: #dd1144; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"!style!css!./style.css"</span>);</div>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
document.write(<span class="built_in" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">require</span>(<span class="string" style="border: 0px; color: #dd1144; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"./content.js"</span>));</div>
</code></pre>
</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
Recompile and update your browser to see your application with yellow background.</div>
<a href="https://www.blogger.com/null" id="first-loader" style="background-color: white; border: 0px; color: #006a86; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><span style="background-color: #f9f9f9; color: #333333; font-family: inherit; font-size: 16px; font-style: inherit; font-weight: inherit;">By prefixing loaders to a module request, the module went through a loader pipeline. These loaders transform the file content in specific ways. After these transformations are applied, the result is a JavaScript module.</span><br />
<hr style="background-color: white; border-bottom: none; border-image: initial; border-left: none; border-right: none; border-top-color: rgb(153, 153, 153); border-top-style: dashed; color: white; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; height: 1px; margin-bottom: 20px; margin-top: 20px;" />
<h1 style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; border-width: 0px 0px 1px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 30px; font-weight: 500; line-height: 1.1; margin: 20px 0px 10px; outline: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">
BINDING LOADERS</h1>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
We don’t want to write such long requires <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">require(<span class="string" style="border: 0px; color: #dd1144; font-family: inherit; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"!style!css!./style.css"</span>);</code>.</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
We can bind file extensions to loaders so we just need to write: <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">require(<span class="string" style="border: 0px; color: #dd1144; font-family: inherit; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"./style.css"</span>)</code></div>
<div class="panel panel-update" style="background-color: #d9edf7; border-radius: 4px; border: 1px solid rgb(188, 232, 241); box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px; color: #3a87ad; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<h3 class="panel-title" style="border-bottom-color: transparent; border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: initial; border-width: 0px 0px 1px; font-size: 1pc; font-style: inherit; font-weight: 500; line-height: 1.1; margin: 0px; outline: 0px; padding: 10px 15px; vertical-align: baseline;">
update <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; color: #333333; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">entry.js</code></h3>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><div class="deletion" style="background: rgb(255, 221, 221); border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
- <span class="built_in" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">require</span>(<span class="string" style="border: 0px; color: #dd1144; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"!style!css!./style.css"</span>);</div>
<div class="addition" style="background: rgb(221, 255, 221); border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
+ <span class="built_in" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">require</span>(<span class="string" style="border: 0px; color: #dd1144; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"./style.css"</span>);</div>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
document.write(<span class="built_in" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">require</span>(<span class="string" style="border: 0px; color: #dd1144; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"./content.js"</span>));</div>
</code></pre>
</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
Run the compilation with:</div>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; margin-bottom: 10px; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">webpack ./entry.js bundle.js --module-bind 'css=style!css'</code></pre>
<blockquote style="background-color: #f9f9f9; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; border-width: 0px 0px 0px 5px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; font-style: italic; margin: 0.5em 0px 1em; outline: 0px; padding: 5px 20px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
Some environments may require double quotes: –module-bind “css=style!css”</div>
</blockquote>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
You should see the same result:</div>
<a href="https://www.blogger.com/null" id="binding-loaders" style="background-color: white; border: 0px; color: #006a86; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><span style="background-color: white; color: #333333; font-family: helvetica, arial, freesans, clean, sans-serif; font-size: 30px; text-transform: uppercase;">A CONFIG FILE</span><br />
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
We want to move the config options into a config file:</div>
<div class="panel panel-add" style="background-color: #dff0d8; border-radius: 4px; border: 1px solid rgb(214, 233, 198); box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px; color: #468847; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<h3 class="panel-title" style="border-bottom-color: transparent; border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: initial; border-width: 0px 0px 1px; font-size: 1pc; font-style: inherit; font-weight: 500; line-height: 1.1; margin: 0px; outline: 0px; padding: 10px 15px; vertical-align: baseline;">
add <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; color: #333333; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">webpack.config.js</code></h3>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">module.<span class="built_in" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">exports</span> = {
<span class="attribute" style="border: 0px; color: teal; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">entry</span>: <span class="string" style="border: 0px; color: #dd1144; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"./entry.js"</span>,
<span class="attribute" style="border: 0px; color: teal; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">output</span>: {
<span class="attribute" style="border: 0px; color: teal; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">path</span>: __dirname,
<span class="attribute" style="border: 0px; color: teal; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">filename</span>: <span class="string" style="border: 0px; color: #dd1144; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"bundle.js"</span>
},
<span class="attribute" style="border: 0px; color: teal; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">module</span>: {
<span class="attribute" style="border: 0px; color: teal; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">loaders</span>: [
{ <span class="attribute" style="border: 0px; color: teal; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">test</span>: <span class="regexp" style="border: 0px; color: #009926; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">/\.css$/</span>, <span class="attribute" style="border: 0px; color: teal; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">loader</span>: <span class="string" style="border: 0px; color: #dd1144; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"style!css"</span> }
]
}
};</code></pre>
</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
Now we can just run:</div>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; margin-bottom: 10px; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">webpack</code></pre>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
to compile:</div>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; margin-bottom: 10px; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Version: webpack 1.14.0
Time: 163ms
Asset Size Chunks Chunk Names
bundle.js 10.7 kB 0 [emitted] main
chunk {0} bundle.js (main) 8.85 kB [rendered]
[0] ./tutorials/getting-started/config-file/entry.js 64 bytes {0} [built]
[1] ./tutorials/getting-started/config-file/style.css 943 bytes {0} [built]
[2] ../~/css-loader!./tutorials/getting-started/config-file/style.css 197 bytes {0} [built]
[3] ../~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[4] ../~/style-loader/addStyles.js 6.09 kB {0} [built]
[5] ./tutorials/getting-started/config-file/content.js 45 bytes {0} [built]</code></pre>
<blockquote style="background-color: #f9f9f9; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; border-width: 0px 0px 0px 5px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; font-style: italic; margin: 0.5em 0px 1em; outline: 0px; padding: 5px 20px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
The webpack command-line will try to load the file <code style="background-color: whitesmoke; border-radius: 4px; border: 0px; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 14.4px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 2px 4px; vertical-align: baseline; white-space: nowrap;">webpack.config.js</code> in the current directory.</div>
</blockquote>
<hr style="background-color: white; border-bottom: none; border-image: initial; border-left: none; border-right: none; border-top-color: rgb(153, 153, 153); border-top-style: dashed; color: white; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; height: 1px; margin-bottom: 20px; margin-top: 20px;" />
<h1 style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; border-width: 0px 0px 1px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 30px; font-weight: 500; line-height: 1.1; margin: 20px 0px 10px; outline: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">
A PRETTIER OUTPUT</h1>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
If the project grows the compilation may take a bit longer. So we want to display some kind of progress bar. And we want colors…</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
We can achieve this with</div>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; margin-bottom: 10px; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">webpack --progress --colors</code></pre>
<hr style="background-color: white; border-bottom: none; border-image: initial; border-left: none; border-right: none; border-top-color: rgb(153, 153, 153); border-top-style: dashed; color: white; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; height: 1px; margin-bottom: 20px; margin-top: 20px;" />
<h1 style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; border-width: 0px 0px 1px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 30px; font-weight: 500; line-height: 1.1; margin: 20px 0px 10px; outline: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">
WATCH MODE</h1>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
We don’t want to manually recompile after every change…</div>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; margin-bottom: 10px; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">webpack --progress --colors --watch</code></pre>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
Webpack can cache unchanged modules and output files between compilations.</div>
<blockquote style="background-color: #f9f9f9; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; border-width: 0px 0px 0px 5px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; font-style: italic; margin: 0.5em 0px 1em; outline: 0px; padding: 5px 20px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
When using watch mode, webpack installs file watchers to all files, which were used in the compilation process. If any change is detected, it’ll run the compilation again. When caching is enabled, webpack keeps each module in memory and will reuse it if it isn’t changed.</div>
</blockquote>
<hr style="background-color: white; border-bottom: none; border-image: initial; border-left: none; border-right: none; border-top-color: rgb(153, 153, 153); border-top-style: dashed; color: white; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; height: 1px; margin-bottom: 20px; margin-top: 20px;" />
<h1 style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; border-width: 0px 0px 1px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 30px; font-weight: 500; line-height: 1.1; margin: 20px 0px 10px; outline: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">
DEVELOPMENT SERVER</h1>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
The development server is even better.</div>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; margin-bottom: 10px; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">npm install webpack-dev-server -g</code></pre>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: inherit; font-size: 13px; margin-bottom: 10px; outline: 0px; padding: 9.5px; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-radius: 0px; border: 0px; color: inherit; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">webpack-dev-server --progress --colors</code></pre>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
This binds a small express server on localhost:8080 which serves your static assets as well as the bundle (compiled automatically). It automatically updates the browser page when a bundle is recompiled (SockJS). Open <a href="http://localhost:8080/webpack-dev-server/bundle" style="border: 0px; color: #006a86; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">http://localhost:8080/webpack-dev-server/bundle</a> in your browser.</div>
<a href="https://www.blogger.com/null" id="config-file" style="background-color: white; border: 0px; color: #006a86; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><a href="https://www.blogger.com/null" id="pretty-output" style="background-color: white; border: 0px; color: #006a86; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><a href="https://www.blogger.com/null" id="watch-mode" style="background-color: white; border: 0px; color: #006a86; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><a href="https://www.blogger.com/null" id="development-server" style="background-color: white; border: 0px; color: #006a86; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><br />
<blockquote style="background-color: #f9f9f9; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; border-width: 0px 0px 0px 5px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; font-style: italic; margin: 0.5em 0px 1em; outline: 0px; padding: 5px 20px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
The dev server uses webpack’s watch mode. It also prevents webpack from emitting the resulting files to disk. Instead it keeps and serves the resulting files from memory.</div>
</blockquote>
<br />
Main article is here: <a href="http://webpack.github.io/docs/tutorials/getting-started/%C2%A0" target="_blank">http://webpack.github.io/docs/tutorials/getting-started/ </a></div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-22059871904045219232017-01-08T09:24:00.000-08:002017-01-08T09:32:36.521-08:00Webpack - module bundler<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<b>Webpack কি?</b></div>
<div style="text-align: left;">
<span style="font-size: x-small;"> Webpack হচ্ছে একটা module bundler. যার কাজ হচ্ছে আলাদা-আলাদা এক্সটেনশান এর Module এবং তার সব ধরনের dependency গুলোকে নেয় এবং তা ইন্টারপ্রেট করে একটা Single asset আকারে রুপান্তর করে যা Browser এর পড়ার জন্যে সুবিধাজনক।</span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicnj-BO6z1vKVfe-Bf-6PXv9XSKsVql_CCLcD3bw6dMxAFyFDmnP8SJ3Bxagf0CemnAlE6u_smO295wm5JvYET9bASrb1IFz4hyvR1XnDZ8hGmlqq0izz2xDlXqvyKfegR-L_GnwF_qu4/s1600/what-is-webpack+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicnj-BO6z1vKVfe-Bf-6PXv9XSKsVql_CCLcD3bw6dMxAFyFDmnP8SJ3Bxagf0CemnAlE6u_smO295wm5JvYET9bASrb1IFz4hyvR1XnDZ8hGmlqq0izz2xDlXqvyKfegR-L_GnwF_qu4/s640/what-is-webpack+%25281%2529.png" width="640" /></a></div>
<br />
<br />
<div style="text-align: left;">
<b>Webpack ইউজ করার সুবিধা কি?</b></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-size: x-small;">Initial loading এর জন্যে webpack অনেক কম সময় নেয়।</span></li>
</ul>
<ul style="text-align: left;">
<li><span style="font-size: x-small;">যে কোন ধরনের Static asset কেই module আকারে ইউজ করা যায়।</span></li>
</ul>
<ul style="text-align: left;">
<li><span style="font-size: x-small;">Third party library ইউজ করা যায়।</span></li>
</ul>
<ul style="text-align: left;">
<li><span style="font-size: x-small;">Module bundler এর প্রায় সব কিছুই নিজের মতো করে কাস্টমাইজ করে নেওয়া যায়।</span></li>
</ul>
<ul style="text-align: left;">
<li><span style="font-size: x-small;">জায়ান্ট প্রজেক্টের জন্যে সুবিধাজনক।</span></li>
</ul>
<br />
<br />
<br />
<br />
<div>
<div style="text-align: left;">
<b>Webpack এর কয়েকটি উল্লেকযোগ্য বৈশিষ্টঃ</b></div>
</div>
<div>
<div style="background-color: white; border: 0px; font-family: helvetica, arial, freesans, clean, sans-serif; font-weight: 500; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;">
<span style="color: #3d85c6;">Code Splitting</span></div>
<div style="background-color: white; border: 0px; font-family: helvetica, arial, freesans, clean, sans-serif; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="text-align: left;">
<span style="font-size: x-small;">Webpack এর dependency tree তে দিও ধরনের dependency আছে, আর তা হলো Synchronous এবং Asynchronous . Async dependency গুলো অনেকটা আলাদা আলাদা প্যাকেটের মতো কাজ করে, এবং যখন সবগুলো dependency Optomize হয়ে যায় তখন ওই প্রত্যেক্টা প্যাকেট একটা আলাদা ফাইল হিসাবে প্রসেস হয়।</span></div>
</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="background-color: white; border: 0px; font-family: helvetica, arial, freesans, clean, sans-serif; font-weight: 500; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;">
<span style="color: #3d85c6;">
Loaders</span></div>
<div>
<span style="font-size: x-small;">আমরা যদি শুধুমাত্র Webpack এর কথা চিন্তা করি তাহলে এক্তা শুধুমাত্র JS ফাইলই প্রসেস করতে পারে কিন্তু এতে Loader ব্যাবহারের সুবিধা থাকায় Loader অন্যান্য Resourse গুলোকেও Webpack এর মাধ্যমে JS Asset এ রুপান্তর করতে পারে।</span></div>
</div>
<div>
<br /></div>
<div>
<div style="background-color: white; border: 0px; font-family: helvetica, arial, freesans, clean, sans-serif; font-weight: 500; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;">
<span style="color: #3d85c6;">
Plugin system</span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: helvetica, arial, freesans, clean, sans-serif; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-size: x-small;">Webpack এ প্লাগিন সিস্টেম enabled থাকায় এবং Webpack এর প্রায় সব ধরনের ইন্টারনাল ফিচার প্লাগিন আকারে থাকায় নিজ ইচ্ছা মতো যে কোন ফিচার কাস্টমাইজ করে নেওয়া যায় এমন কি নিজের যে কোন কাস্টমাইজ/নিউ ফিচার open source আকারে অন্যদের সাথে শেয়ারও করা যায় তাতে নিজের ভুলগুলো ধরা পড়ে এবং ফিচারটি আরো ব্যাবহার উপযোগী হয়।</span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Helvetica, Arial, freesans, clean, sans-serif; font-size: 16px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: helvetica, arial, freesans, clean, sans-serif; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-size: xx-small;">মুল লেখাটি এখানেঃ <a href="http://webpack.github.io/docs/what-is-webpack.html">http://webpack.github.io/docs/what-is-webpack.html</a></span></div>
</div>
</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-38995292326241422662016-09-23T00:16:00.003-07:002016-09-23T00:16:39.762-07:00Express JS Routing In Detail<div dir="ltr" style="text-align: left;" trbidi="on">
<section class="page content" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #555555; font-family: "Open Sans", sans-serif; font-size: 14px; margin: 90px 40.4688px 94.4219px; max-width: 1090px; padding-right: 140px;"><div id="page-doc" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;">
<h1 id="routing" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #353535; font-size: 30px; line-height: 36px; margin: 5px 0px 20px;">
Express JS Routing In Detail</h1>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
<em style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #353535; font-weight: bold;">Routing</em> refers to the definition of application end points (URIs) and how they respond to client requests. For an introduction to routing, see <a href="https://expressjs.com/en/starter/basic-routing.html" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">Basic routing</a>.</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
The following code is an example of a very basic route.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">var</span> express <span class="token operator" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.498039); box-sizing: border-box; color: #a67f59;">=</span> <span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">require<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'express'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">var</span> app <span class="token operator" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.498039); box-sizing: border-box; color: #a67f59;">=</span> <span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">express<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token comment" spellcheck="true" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: slategrey;">// respond with "hello world" when a GET request is made to the homepage
</span>app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'hello world'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<h2 id="route-methods" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #353535; margin: 5px 0px;">
Route methods</h2>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
A route method is derived from one of the HTTP methods, and is attached to an instance of the <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">express</code> class.</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
The following code is an example of routes that are defined for the GET and the POST methods to the root of the app.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><span class="token comment" spellcheck="true" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: slategrey;">// GET method route
</span>app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'GET request to the homepage'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token comment" spellcheck="true" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: slategrey;">// POST method route
</span>app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">post<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'POST request to the homepage'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Express supports the following routing methods that correspond to HTTP methods: <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">get</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">post</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">put</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">head</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">delete</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">options</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">trace</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">copy</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">lock</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">mkcol</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">move</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">purge</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">propfind</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">proppatch</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">unlock</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">report</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">mkactivity</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">checkout</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">merge</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">m-search</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">notify</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">subscribe</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">unsubscribe</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">patch</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">search</code>, and <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">connect</code>.</div>
<div class="doc-box doc-info" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 250, 236); border-radius: 3px; border: 1px solid rgb(223, 226, 211); box-sizing: border-box; font-size: 12px; line-height: 14px; margin: 20px 28.5px; padding: 10px;">
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em;">
To route methods that translate to invalid JavaScript variable names, use the bracket notation. For example, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">app['m-search']('/', function ...</code></div>
</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
There is a special routing method, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">app.all()</code>, which is not derived from any HTTP method. This method is used for loading middleware functions at a path for all request methods.</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
In the following example, the handler will be executed for requests to “/secret” whether you are using GET, POST, PUT, DELETE, or any other HTTP request method that is supported in the <a href="https://nodejs.org/api/http.html#http_http_methods" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">http module</a>.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">all<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/secret'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
console<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">log<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'Accessing the secret section ...'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span> <span class="token comment" spellcheck="true" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: slategrey;">// pass control to the next handler
</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<h2 id="route-paths" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #353535; margin: 5px 0px;">
Route paths</h2>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Route paths, in combination with a request method, define the endpoints at which requests can be made. Route paths can be strings, string patterns, or regular expressions.</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
The characters <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">?</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">+</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">*</code>, and <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">()</code> are subsets of their regular expression counterparts. The hyphen (<code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">-</code>) and the dot (<code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">.</code>) are interpreted literally by string-based paths.</div>
<div class="doc-box doc-info" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 250, 236); border-radius: 3px; border: 1px solid rgb(223, 226, 211); box-sizing: border-box; font-size: 12px; line-height: 14px; margin: 20px 28.5px; padding: 10px;">
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em;">
Express uses <a href="https://www.npmjs.com/package/path-to-regexp" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">path-to-regexp</a> for matching the route paths; see the path-to-regexp documentation for all the possibilities in defining route paths. <a href="http://forbeslindesay.github.io/express-route-tester/" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">Express Route Tester</a> is a handy tool for testing basic Express routes, although it does not support pattern matching.</div>
</div>
<div class="doc-box doc-warn" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(249, 241, 241); border-radius: 3px; border: 1px solid rgb(226, 211, 211); box-sizing: border-box; font-size: 12px; line-height: 14px; margin: 20px 28.5px; padding: 10px;">
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em;">
Query strings are not part of the route path.</div>
</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Here are some examples of route paths based on strings.</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
This route path will match requests to the root route, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">/</code>.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'root'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
This route path will match requests to <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">/about</code>.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/about'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'about'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
This route path will match requests to <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">/random.text</code>.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/random.text'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'random.text'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Here are some examples of route paths based on string patterns.</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
This route path will match <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">acd</code> and <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">abcd</code>.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/ab?cd'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'ab?cd'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
This route path will match <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">abcd</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">abbcd</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">abbbcd</code>, and so on.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/ab+cd'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'ab+cd'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
This route path will match <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">abcd</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">abxcd</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">abRANDOMcd</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">ab123cd</code>, and so on.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/ab*cd'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'ab*cd'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
This route path will match <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">/abe</code> and <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">/abcde</code>.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/ab(cd)?e'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'ab(cd)?e'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Examples of route paths based on regular expressions:</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
This route path will match anything with an “a” in the route name.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token regex" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #ee9900;">/a/</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/a/'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
This route path will match <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">butterfly</code> and <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">dragonfly</code>, but not <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">butterflyman</code>, <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">dragonflyman</code>, and so on.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token regex" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #ee9900;">/.*fly$/</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/.*fly$/'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<h3 id="route-parameters" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #353535; margin: 5px 0px;">
Route parameters</h3>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Route parameters are named URL segments that are used to capture the values specified at their position in the URL. The captured values are populated in the <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">req.params</code> object, with the name of the route parameter specified in the path as their respective keys.</div>
<pre style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; overflow: scroll; padding: 16px; white-space: pre-wrap !important;"><code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; overflow: scroll; word-break: break-all;">Route path: /users/:userId/books/:bookId
Request URL: http://localhost:3000/users/34/books/8989
req.params: { "userId": "34", "bookId": "8989" }
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
To define routes with route parameters, simply specify the route parameters in the path of the route as shown below.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/users/:userId/books/:bookId'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span>params<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Since the hyphen (<code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">-</code>) and the dot (<code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">.</code>) are interpreted literally, they can be used along with route parameters for useful purposes.</div>
<pre style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; overflow: scroll; padding: 16px; white-space: pre-wrap !important;"><code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; overflow: scroll; word-break: break-all;">Route path: /flights/:from-:to
Request URL: http://localhost:3000/flights/LAX-SFO
req.params: { "from": "LAX", "to": "SFO" }
</code></pre>
<pre style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; overflow: scroll; padding: 16px; white-space: pre-wrap !important;"><code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; overflow: scroll; word-break: break-all;">Route path: /plantae/:genus.:species
Request URL: http://localhost:3000/plantae/Prunus.persica
req.params: { "genus": "Prunus", "species": "persica" }
</code></pre>
<div class="doc-box doc-notice" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(250, 246, 232); border-radius: 3px; border: 1px solid rgb(222, 216, 193); box-sizing: border-box; font-size: 12px; line-height: 14px; margin: 20px 28.5px; padding: 10px;">
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em;">
The name of route parameters must be made up of “word characters” ([A-Za-z0-9_]).</div>
</div>
<h2 id="route-handlers" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #353535; margin: 5px 0px;">
Route handlers</h2>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
You can provide multiple callback functions that behave like <a href="https://expressjs.com/en/guide/using-middleware.html" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">middleware</a> to handle a request. The only exception is that these callbacks might invoke <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">next('route')</code> to bypass the remaining route callbacks. You can use this mechanism to impose pre-conditions on a route, then pass control to subsequent routes if there’s no reason to proceed with the current route.</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Route handlers can be in the form of a function, an array of functions, or combinations of both, as shown in the following examples.</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
A single callback function can handle a route. For example:</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/example/a'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'Hello from A!'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
More than one callback function can handle a route (make sure you specify the <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">next</code> object). For example:</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/example/b'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
console<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">log<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'the response will be sent by the next function ...'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'Hello from B!'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
An array of callback functions can handle a route. For example:</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">var</span> cb0 <span class="token operator" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.498039); box-sizing: border-box; color: #a67f59;">=</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
console<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">log<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'CB0'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span>
<span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">var</span> cb1 <span class="token operator" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.498039); box-sizing: border-box; color: #a67f59;">=</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
console<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">log<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'CB1'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span>
<span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">var</span> cb2 <span class="token operator" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.498039); box-sizing: border-box; color: #a67f59;">=</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'Hello from C!'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span>
app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/example/c'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">[</span>cb0<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> cb1<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> cb2<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">]</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
A combination of independent functions and arrays of functions can handle a route. For example:</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">var</span> cb0 <span class="token operator" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.498039); box-sizing: border-box; color: #a67f59;">=</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
console<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">log<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'CB0'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span>
<span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">var</span> cb1 <span class="token operator" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.498039); box-sizing: border-box; color: #a67f59;">=</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
console<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">log<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'CB1'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span>
app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/example/d'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">[</span>cb0<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> cb1<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">]</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
console<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">log<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'the response will be sent by the next function ...'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'Hello from D!'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<h2 id="response-methods" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #353535; margin: 5px 0px;">
Response methods</h2>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
The methods on the response object (<code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">res</code>) in the following table can send a response to the client, and terminate the request-response cycle. If none of these methods are called from a route handler, the client request will be left hanging.</div>
<table style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-collapse: collapse; border: 1px solid rgb(198, 198, 198); box-sizing: border-box; empty-cells: show; margin: 1em 1em 1em 0px; width: 950px;"><thead style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;">
<tr style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><th style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: #dadada; border: 1px solid rgb(198, 198, 198); box-sizing: border-box; color: #353535; font-size: 15.4px; line-height: 18.48px; padding: 7px; vertical-align: top;">Method</th><th style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: #dadada; border: 1px solid rgb(198, 198, 198); box-sizing: border-box; color: #353535; font-size: 15.4px; line-height: 18.48px; padding: 7px; vertical-align: top;">Description</th></tr>
</thead><tbody style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;">
<tr style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;"><a href="https://expressjs.com/en/4x/api.html#res.download" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">res.download()</a></td><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;">Prompt a file to be downloaded.</td></tr>
<tr style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;"><a href="https://expressjs.com/en/4x/api.html#res.end" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">res.end()</a></td><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;">End the response process.</td></tr>
<tr style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;"><a href="https://expressjs.com/en/4x/api.html#res.json" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">res.json()</a></td><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;">Send a JSON response.</td></tr>
<tr style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;"><a href="https://expressjs.com/en/4x/api.html#res.jsonp" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">res.jsonp()</a></td><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;">Send a JSON response with JSONP support.</td></tr>
<tr style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;"><a href="https://expressjs.com/en/4x/api.html#res.redirect" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">res.redirect()</a></td><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;">Redirect a request.</td></tr>
<tr style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;"><a href="https://expressjs.com/en/4x/api.html#res.render" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">res.render()</a></td><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;">Render a view template.</td></tr>
<tr style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;"><a href="https://expressjs.com/en/4x/api.html#res.send" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">res.send()</a></td><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;">Send a response of various types.</td></tr>
<tr style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;"><a href="https://expressjs.com/en/4x/api.html#res.sendFile" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">res.sendFile()</a></td><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;">Send a file as an octet stream.</td></tr>
<tr style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;"><a href="https://expressjs.com/en/4x/api.html#res.sendStatus" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">res.sendStatus()</a></td><td style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgb(198, 198, 198); box-sizing: border-box; line-height: 16.8px; padding: 7px; vertical-align: top;">Set the response status code and send its string representation as the response body.</td></tr>
</tbody></table>
<h2 id="app-route" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #353535; margin: 5px 0px;">
app.route()</h2>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
You can create chainable route handlers for a route path by using <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">app.route()</code>. Because the path is specified at a single location, creating modular routes is helpful, as is reducing redundancy and typos. For more information about routes, see: <a href="https://expressjs.com/en/4x/api.html#router" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">Router() documentation</a>.</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Here is an example of chained route handlers that are defined by using <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">app.route()</code>.</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">route<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/book'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'Get a random book'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">post<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'Add a book'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">put<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'Update the book'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<h2 id="express-router" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #353535; margin: 5px 0px;">
express.Router</h2>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Use the <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">express.Router</code> class to create modular, mountable route handlers. A <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">Router</code> instance is a complete middleware and routing system; for this reason, it is often referred to as a “mini-app”.</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
The following example creates a router as a module, loads a middleware function in it, defines some routes, and mounts the router module on a path in the main app.</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Create a router file named <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">birds.js</code> in the app directory, with the following content:</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">var</span> express <span class="token operator" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.498039); box-sizing: border-box; color: #a67f59;">=</span> <span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">require<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'express'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">var</span> router <span class="token operator" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.498039); box-sizing: border-box; color: #a67f59;">=</span> express<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">Router<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token comment" spellcheck="true" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: slategrey;">// middleware that is specific to this router
</span>router<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">use<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span> <span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">timeLog<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
console<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">log<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'Time: '</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> Date<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">now<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">next<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token comment" spellcheck="true" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: slategrey;">// define the home page route
</span>router<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'Birds home page'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token comment" spellcheck="true" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: slategrey;">// define the about route
</span>router<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/about'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">function</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'About birds'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
module<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span>exports <span class="token operator" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.498039); box-sizing: border-box; color: #a67f59;">=</span> router<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Then, load the router module in the app:</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><span class="token keyword" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #0077aa;">var</span> birds <span class="token operator" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.498039); box-sizing: border-box; color: #a67f59;">=</span> <span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">require<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'./birds'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span>
app<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">.</span><span class="token function" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #dd4a68;">use<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #669900;">'/birds'</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">,</span> birds<span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
The app will now be able to handle requests to <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">/birds</code> and <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">/birds/about</code>, as well as call the <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">timeLog</code> middleware function that is specific to the route.</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
<br /></div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Detail is here:</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
<a href="https://expressjs.com/en/guide/routing.html" target="_blank">https://expressjs.com/en/guide/routing.html</a></div>
</div>
</section><a href="https://expressjs.com/en/guide/routing.html#" id="top" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: black; border-radius: 2px; bottom: 15px; box-sizing: border-box; color: white; font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 0; opacity: 0; padding: 8px; position: fixed; right: 15px; text-decoration: none; transition: opacity 300ms;"><img src="https://expressjs.com/images/arrow.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; height: 5px; width: 8px;" /></a><br />
<div>
<br /></div>
<br />
<footer style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #555555; font-family: "Open Sans", sans-serif; font-size: 11px; margin: 70px 10px 30px;"></footer></div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-51429858177340512922016-09-22T23:40:00.002-07:002016-09-22T23:43:53.116-07:00Express Js Routing System<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="color: #353535; font-family: "open sans" , sans-serif; font-size: 30px;">Basic routing system</span><br />
<em style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #353535; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: bold;"><br /></em>
<em style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #353535; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: bold;"><br /></em>
<em style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #353535; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: bold;">Routing</em><span style="color: #555555; font-family: "open sans" , sans-serif; font-size: 14px;"> </span><span style="color: #555555; font-family: "open sans" , sans-serif; font-size: 14px;">refers to determining how an application responds to a client request to a particular endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, and so on).</span><br />
<span style="color: #555555; font-family: "open sans" , sans-serif; font-size: 14px;"><br /></span>
<span style="color: #555555; font-family: "open sans" , sans-serif; font-size: 14px;">Each route can have one or more handler functions, which are executed when the route is matched.</span><br />
<br />
<br />
<section class="page content" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #555555; font-family: "Open Sans", sans-serif; font-size: 14px; margin: 90px 40.4688px 94.4219px; max-width: 1090px; padding-right: 140px;"><div id="page-doc" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;">
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Route definition takes the following structure:</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">METHOD<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span>PATH<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> HANDLER<span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Where:</div>
<ul style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;">
<li style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">app</code> is an instance of <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">express</code>.</li>
<li style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">METHOD</code> is an <a href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">HTTP request method</a>, in lowercase.</li>
<li style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">PATH</code> is a path on the server.</li>
<li style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box;"><code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">HANDLER</code> is the function executed when the route is matched.</li>
</ul>
<div class="doc-box doc-notice" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(250, 246, 232); border-radius: 3px; border: 1px solid rgb(222, 216, 193); box-sizing: border-box; font-size: 12px; line-height: 14px; margin: 20px 28.5px; padding: 10px;">
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em;">
This tutorial assumes that an instance of <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">express</code> named <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">app</code> is created and the server is running. If you are not familiar with creating an app and starting it, see the <a href="https://expressjs.com/en/starter/hello-world.html" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">Hello world example</a>.</div>
</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
The following examples illustrate defining simple routes.</div>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Respond with <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">Hello World!</code> on the homepage:</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="box-sizing: border-box; color: #0077aa;">get</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span><span class="token string" style="box-sizing: border-box; color: #669900;">'/'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="box-sizing: border-box; color: #669900;">'Hello World!'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Respond to POST request on the root route (<code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">/</code>), the application’s home page:</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">post<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="box-sizing: border-box; color: #669900;">'/'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="box-sizing: border-box; color: #669900;">'Got a POST request'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Respond to a PUT request to the <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">/user</code> route:</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">put<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="box-sizing: border-box; color: #669900;">'/user'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="box-sizing: border-box; color: #669900;">'Got a PUT request at /user'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
Respond to a DELETE request to the <code style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #333333; white-space: pre-wrap !important;">/user</code> route:</div>
<pre class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgb(247, 247, 247); border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: black; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 10px !important; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;"><code class=" language-javascript" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", monospace; line-height: 1.5; overflow: scroll; tab-size: 4; text-shadow: white 0px 1px; word-break: normal; word-spacing: normal;">app<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token keyword" style="box-sizing: border-box; color: #0077aa;">delete</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span><span class="token string" style="box-sizing: border-box; color: #669900;">'/user'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> <span class="token keyword" style="box-sizing: border-box; color: #0077aa;">function</span> <span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span>req<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> res<span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span> <span class="token punctuation" style="box-sizing: border-box; color: #999999;">{</span>
res<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">send<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="box-sizing: border-box; color: #669900;">'Got a DELETE request at /user'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span>
<span class="token punctuation" style="box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span>
</code></pre>
<div style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; line-height: 1.35em; margin-bottom: 10px; margin-top: 10px;">
For more details about routing, see the <a href="https://expressjs.com/en/guide/routing.html" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #259dff; text-decoration: none;">routing guide</a>.<br />
<br />
<br />
Detail is here:<br />
<a href="https://expressjs.com/en/starter/basic-routing.html" target="_blank">https://expressjs.com/en/starter/basic-routing.html</a><br />
<br />
#This is a personal note of mine.</div>
</div>
</section><br />
<br />
<br />
<footer style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #555555; font-family: "Open Sans", sans-serif; font-size: 11px; margin: 70px 10px 30px;"></footer></div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-33127370817259674132016-08-30T08:29:00.002-07:002016-08-30T12:37:21.834-07:00ECMA Script-6 Introduction<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
<b>Introduction:</b></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBanB524dBjvm3HD9jEOirm-ZLKd-RODgszR-vMopAFKIqsW83tHt5YuoQSd082oYg01BR8MxjRKvbn-ng9GuuQPbjvgRpRHwGecVcXLA1q3JEnPTzKb9aznr6lDzuMKYyKd8ecTc1B3o/s1600/4731.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBanB524dBjvm3HD9jEOirm-ZLKd-RODgszR-vMopAFKIqsW83tHt5YuoQSd082oYg01BR8MxjRKvbn-ng9GuuQPbjvgRpRHwGecVcXLA1q3JEnPTzKb9aznr6lDzuMKYyKd8ecTc1B3o/s320/4731.png" width="320" /></a></div>
<br />
<br />
The JavaScript core language features are defined in a standard called ECMA-262. The language defined in this standard is called ECMAScript & this article covers the most recent major update & changes to the language: ECMAScript 6. ECMAScript is the core language of node.js</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-6669403298837700472016-08-30T08:19:00.003-07:002016-08-30T12:36:54.159-07:00ECMA Script-6 Block Bindings<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
<b>Block Bindings</b></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrTclv64XrlUKyC3r02kJxwqoidXY-9j3-Bm-ptO4nvp2z79bfcfhSumNjJc-92uYLDK-UqMjECWKJhAptGRIKGiQDjveaiIjYo3-x4_x8YI_7D3yBmOumIHF04zWoxiHWVRrTiukKlgY/s1600/ES6-ecmascript6-logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrTclv64XrlUKyC3r02kJxwqoidXY-9j3-Bm-ptO4nvp2z79bfcfhSumNjJc-92uYLDK-UqMjECWKJhAptGRIKGiQDjveaiIjYo3-x4_x8YI_7D3yBmOumIHF04zWoxiHWVRrTiukKlgY/s320/ES6-ecmascript6-logo.jpg" width="320" /></a></div>
<br />
<br />
<h3 style="text-align: left;">
<b>Var Declarations and Hoisting:</b></h3>
Variable declarations using var are treated as if they are at the top of the function (or global scope, if declared outside of a function) regardless of where the actual declaration occurs; this is called hoisting. Consider the examples below:<br />
<br />
function getValue(condition) {<br />
<br />
if (condition) {<br />
var value = "blue";<br />
<br />
// other code<br />
<br />
return value;<br />
} else {<br />
<br />
// value exists here with a value of undefined<br />
<br />
return null;<br />
}<br />
<br />
// value exists here with a value of undefined<br />
}<br />
<br />
<br />
Behind the scenes, the JavaScript engine changes the getValue function to look like this:<br />
function getValue(condition) {<br />
<br />
var value;<br />
<br />
if (condition) {<br />
value = "blue";<br />
<br />
// other code<br />
<br />
return value;<br />
} else {<br />
<br />
return null;<br />
}<br />
}<br />
<br />
The declaration of value is hoisted to the top. The variable value is actually still accessible from within the else clause. If accessed from within the else clause, the variable value will be undefined because it hasn’t been initialized, its initialized only in If clause.<br />
<br />
<h3 style="text-align: left;">
<b>Block-Level Declarations:</b></h3>
<br />
1.Inside of a function<br />
2.Inside of a block { \\code block }<br />
<br />
Let Declarations<br />
The let declaration syntax is the same as the syntax for var. You can basically replace var with let to declare a variable, but the limit is only the current code block. Here’s an example:<br />
<br />
function getValue(condition) {<br />
<br />
if (condition) {<br />
let value = "blue";<br />
<br />
// other code<br />
<br />
return value;<br />
} else {<br />
<br />
// value doesn't exist here<br />
<br />
return null;<br />
}<br />
<br />
// value doesn't exist here<br />
}<br />
<br />
<br />
<h3 style="text-align: left;">
<b>No Redeclaration:</b></h3>
<br />
If an identifier has already been defined in a scope, then using the identifier in a let declaration inside that scope causes an error to be thrown. For example:<br />
<br />
var count = 30;<br />
<br />
// Syntax error<br />
let count = 40;<br />
<br />
This next let declaration exaple doesn’t throw an error because it creates a new variable within the if statement. Inside the if block, this new variable shadows the global count but prevents access to it until execution leaves the block.<br />
<br />
var count = 30;<br />
<br />
// Does not throw an error<br />
if (condition) {<br />
<br />
let count = 40;<br />
<br />
// more code<br />
}<br />
<br />
<h3 style="text-align: left;">
<b>Constant Declarations:</b></h3>
<br />
You can also define variables with the const declaration syntax. Variables declared using const are considered constants, meaning their values cannot be changed once set. For this reason, every const variable must be initialized when declaration, as shown in this example:<br />
<br />
// Valid constant<br />
const maxItems = 30;<br />
<br />
// Syntax error: missing initialization<br />
const name;<br />
<br />
<h3>
<b>Constants vs Let Declarations:</b></h3>
<br />
Constants are like let declarations which is block-level declarations. That means constants are no longer accessible once execution flows out of the block, const doesn't hoisted, as demonstrated in this example:<br />
<br />
if (condition) {<br />
const maxItems = 5;<br />
<br />
// more code<br />
}<br />
<br />
// maxItems isn't accessible here<br />
<br />
A const declaration throws an error when made with an identifier which is already-defined variable in the same scope. It doesn’t matter variable was declared using var or let. For example, consider this code:<br />
<br />
var message = "Hello!";<br />
let age = 25;<br />
<br />
// Each of these would throw an error.<br />
const message = "Goodbye!";<br />
const age = 30;<br />
<br />
Attempting to assign a const to a previously defined constant will throw an error, in both strict and non-strict modes:<br />
<br />
const maxItems = 5;<br />
<br />
maxItems = 6; // throws error<br />
<br />
It wasn't throws error in case of let. As example below:<br />
<br />
let maxItems = 5;<br />
<br />
let = 6; // throws error<br />
<br />
<h3 style="text-align: left;">
Declaring Objects with Const:</h3>
<br />
A const declarations for objects do not prevent modification of the objects. For example:<br />
<br />
const person = {<br />
name: "Nicholas"<br />
};<br />
<br />
// works<br />
person.name = "Greg";<br />
<br />
// throws an error<br />
person = {<br />
name: "Greg"<br />
};<br />
<br />
**Just remember: const prevents modification of the binding, not modification of the bound value.<br />
<br />
<h3 style="text-align: left;">
<b>The Temporal Dead Zone:</b></h3>
<br />
A variable declared with either let or const cannot be accessed until after the declaration. Follow this example:<br />
<br />
if (condition) {<br />
console.log(typeof value); // ReferenceError!<br />
let value = "blue";<br />
}<br />
<br />
<h3 style="text-align: left;">
<b>Block Binding in Loops:</b></h3>
<br />
This is onne area where developers most want block level scoping of variables is within for loops, where the throwaway counter variable is meant to be used only inside the loop. For for this we have to use let not var, cause var is being hoisted. Follow the two exaples below:<br />
<br />
for (var i = 0; i < 10; i++) {<br />
process(items[i]);<br />
}<br />
<br />
// i is still accessible here<br />
console.log(i); // 10<br />
<br />
The variable i is still accessible after the loop is completed because the var declaration gets hoisted. Using let instead, as in the following code to ignore this problem:<br />
<br />
for (let i = 0; i < 10; i++) {<br />
process(items[i]);<br />
}<br />
<br />
// i is not accessible here - throws an error<br />
console.log(i);<br />
<br />
In this example, the variable i only exists within the for loop.<br />
<br />
<h3 style="text-align: left;">
<b>Functions in Loops:</b></h3>
<br />
The characteristics of var have made creating functions inside of loops problematic, because the loop variables are accessible from outside the scope of the loop. Consider the following code:<br />
<br />
var funcs = [];<br />
<br />
for (var i = 0; i < 10; i++) {<br />
funcs.push(function() { console.log(i); });<br />
}<br />
<br />
funcs.forEach(function(func) {<br />
func(); // outputs the number "10" ten times<br />
});<br />
<br />
It outputs the number 10 ten times in a row. The variable i has a value of 10 once the loop completes, and so when console.log(i) is called, that value prints each time.<br />
<br />
To fix this problem, developers use immediately-invoked function expressions (IIFEs) inside of loops to force a new copy of the variable they want to iterate over to be created, as in this example:<br />
<br />
var funcs = [];<br />
<br />
for (var i = 0; i < 10; i++) {<br />
funcs.push((function(value) {<br />
return function() {<br />
console.log(value);<br />
}<br />
}(i)));<br />
}<br />
<br />
funcs.forEach(function(func) {<br />
func(); // outputs 0, then 1, then 2, up to 9<br />
});<br />
<br />
**Fortunately, block-level binding with let and const in ECMAScript 6 can simplify this loop for you.<br />
<h3 style="text-align: left;">
<b><br /></b><b>Let Declarations in Loops:</b></h3>
<br />
On each iteration, the loop creates a new variable and initializes it to the new value with the previous same name. Consider the example:<br />
<br />
var funcs = [];<br />
<br />
for (let i = 0; i < 10; i++) {<br />
funcs.push(function() {<br />
console.log(i);<br />
});<br />
}<br />
<br />
funcs.forEach(function(func) {<br />
func(); // outputs 0, then 1, then 2, up to 9<br />
})<br />
<br />
For more clearance about the fact follow this example also:<br />
<br />
var funcs = [],<br />
object = {<br />
a: true,<br />
b: true,<br />
c: true<br />
};<br />
<br />
for (let key in object) {<br />
funcs.push(function() {<br />
console.log(key);<br />
});<br />
}<br />
<br />
funcs.forEach(function(func) {<br />
func(); // outputs "a", then "b", then "c"<br />
});<br />
In this example, the for-in loop shows the same behavior as the for loop. Each time through the loop, a new key binding is created, and so each function has its own copy of the key variable. The result is that each function outputs a different value. If var were used to declare key, all functions would output "c".<br />
<br />
<br />
<h3 style="text-align: left;">
<b>Constant Declarations in Loops:</b></h3>
<br />
The ECMAScript 6 specification doesn’t explicitly disallow const declarations in loops; however, there are different behaviors based on the type of loop you’re using. For a normal for loop, you can use const in the initializer, but the loop will throw a warning when you attempt to change the value. For example:<br />
<br />
var funcs = [];<br />
<br />
// throws an error after one iteration<br />
for (const i = 0; i < 10; i++) {<br />
funcs.push(function() {<br />
console.log(i);<br />
});<br />
}<br />
In this code, the i variable is declared as a constant. The first iteration of the loop, where i is 0, executes successfully. An error is thrown when i++ executes because it’s attempting to modify a constant.<br />
<br />
When used in a for-in or for-of loop, on the other hand, a const variable behaves the same as a let variable. So the following should not cause an error:<br />
<br />
var funcs = [],<br />
object = {<br />
a: true,<br />
b: true,<br />
c: true<br />
};<br />
<br />
// doesn't cause an error<br />
for (const key in object) {<br />
funcs.push(function() {<br />
console.log(key);<br />
});<br />
}<br />
<br />
funcs.forEach(function(func) {<br />
func(); // outputs "a", then "b", then "c"<br />
});<br />
<br />
The for-in and for-of loops work with const because the loop initializer creates a new binding on each iteration through the loop rather than attempting to modify the value of an existing binding (here key is a, b and c).<br />
<br />
<h3 style="text-align: left;">
<b>Global Block Bindings:</b></h3>
<br />
Another way in which let and const are different from var. When var is used in the global scope, which is a property on the global object (window in browsers). That means you can overwrite an existing global using var, such as:<br />
<br />
// in a browser<br />
var RegExp = "Hello!";<br />
console.log(window.RegExp); // "Hello!"<br />
<br />
var ncz = "Hi!";<br />
console.log(window.ncz); // "Hi!"<br />
<br />
If you instead use let or const in the global scope, a new binding is created in the global scope but no property is added to the global object. That also means you cannot overwrite a global variable using let or const, you can only shadow it. Here’s an example:<br />
<br />
// in a browser<br />
let RegExp = "Hello!";<br />
console.log(RegExp); // "Hello!"<br />
console.log(window.RegExp === RegExp); // false<br />
<br />
const ncz = "Hi!";<br />
console.log(ncz); // "Hi!"<br />
console.log("ncz" in window); // false<br />
<br />
This capability makes let and const a lot safer to use in the global scope when you don’t want to create properties on the global object.<br />
<br />
<h3 style="text-align: left;">
<b>Summary of Block Bindings:</b></h3>
<br />
The let and const block bindings introduce lexical scoping to JavaScript. These declarations are not hoisted and only exist within the block in which they are declared. This offers behavior that is more like other languages and less likely to cause unintentional errors, as variables can now be declared exactly where they are needed. As a side effect, you cannot access variables before they are declared, even with safe operators such as typeof. Attempting to access a block binding before its declaration results in an error due to the binding’s presence in the temporal dead zone (TDZ).<br />
<br />
In many cases, let and const behave in a manner similar to var; however, this is not true for loops. For both let and const, for-in and for-of loops create a new binding with each iteration through the loop. That means functions created inside the loop body can access the loop bindings values as they are during the current iteration, rather than as they were after the loop’s final iteration (the behavior with var). The same is true for let declarations in for loops, while attempting to use const declarations in a for loop may result in an error.<br />
<br />
The current best practice for block bindings is to use const by default and only use let when you know a variable’s value needs to change. This ensures a basic level of immutability in code that can help prevent certain types of errors.<br />
<div>
<br /></div>
</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-50810651969271264662016-08-29T11:58:00.003-07:002016-08-30T12:42:11.608-07:00Xampp MySql starting problem fixed<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white;">Xampp V.3.2.2 Install করার পর Apache এবং Mysql ২ টাই রান করছিলো না,</span><br />
<span style="background-color: white;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAc3IpyUs8WdQe8XCR5Xhlzx2cpnZ_zE_5_fcRSWUOo7sCGjmInkaZQ1Sab7wOUu-bbjw2jo8K4hWblZ0QEc0qpYVc7xU3_fTmblTXp2ZGeXfmCoii9ulcxASMJqBWMXBzaD5rfUjvJEA/s1600/Capture.PNG" imageanchor="1" style="background-color: white; margin-left: 1em; margin-right: 1em;"><img border="0" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAc3IpyUs8WdQe8XCR5Xhlzx2cpnZ_zE_5_fcRSWUOo7sCGjmInkaZQ1Sab7wOUu-bbjw2jo8K4hWblZ0QEc0qpYVc7xU3_fTmblTXp2ZGeXfmCoii9ulcxASMJqBWMXBzaD5rfUjvJEA/s320/Capture.PNG" width="320" /></a></div>
<span style="background-color: white;"><br /></span>
<span style="background-color: white;">Solve for Apache: Go to the config file for apache httpd.conf</span><br />
<span style="background-color: white;">Change the port from 80 to 88</span><br />
<span style="background-color: white;">Re-run apache. It will run</span><br />
<span style="background-color: white;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvfPK_N0a51bGiE52GTvlKizDGEnlL2nad0vI4sV6lxBNkMNimhyphenhyphenE7Jfqn2NDCantp6I4jEdyWI58_2A03D_UAIgt1J7dXqXK2DXZbJehh0D1HwzrU-kMRV3VqwsDYmj54oDs8ikaWbWs/s1600/Capture1.PNG" imageanchor="1" style="background-color: white; margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvfPK_N0a51bGiE52GTvlKizDGEnlL2nad0vI4sV6lxBNkMNimhyphenhyphenE7Jfqn2NDCantp6I4jEdyWI58_2A03D_UAIgt1J7dXqXK2DXZbJehh0D1HwzrU-kMRV3VqwsDYmj54oDs8ikaWbWs/s320/Capture1.PNG" width="320" /></a></div>
<span style="background-color: white;"><br /></span>
<span style="background-color: white;"><br /></span>
<div>
<span style="background-color: white;">Solve for Mysql: Go to Command Prompt Windows+R then Type cmd</span></div>
<div>
<span style="background-color: white;">From administrator mode type 'sc delete mysql' & press Enter</span></div>
<div>
<span style="background-color: white;">Re-run Apache, Apache should run.</span><br />
<span style="background-color: white;"><br /></span>
<span style="background-color: white;">If still you can not access phpmyadmin</span><br />
<span style="background-color: white;">https://localhost/phpmyadmin/</span><br />
<span style="background-color: white;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiz8v2itRp_nYptao8Xns2-MUAOufjMKwgq8q0wOFpj5vsZd4tZoYRm_NhfE6KKXyvCqWSCkKflWy5-g_8AQnofKHb8vPsjfb03HfgAl5EtRf06077etzNf2yZKylRrN0SjGHCQSdTCgI/s1600/F6Ud6.png" imageanchor="1" style="background-color: white; margin-left: 1em; margin-right: 1em;"><img border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiz8v2itRp_nYptao8Xns2-MUAOufjMKwgq8q0wOFpj5vsZd4tZoYRm_NhfE6KKXyvCqWSCkKflWy5-g_8AQnofKHb8vPsjfb03HfgAl5EtRf06077etzNf2yZKylRrN0SjGHCQSdTCgI/s320/F6Ud6.png" width="320" /></a></div>
<span style="background-color: white;"><br /></span>
<span style="background-color: white;"><br /></span>
<span style="background-color: white;">Step 01: Stop Mysql from xampp control panel</span><br />
<span style="background-color: white;"><br /></span>
<div style="color: #333333; font-family: georgia, utopia, "palatino linotype", palatino, serif; font-size: 14.49px; line-height: 21.735px; text-align: justify;">
<u style="background-color: white;">Step 02</u></div>
<div style="color: #333333; font-family: georgia, utopia, "palatino linotype", palatino, serif; font-size: 14.49px; line-height: 21.735px; text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div style="color: #333333; font-family: georgia, utopia, "palatino linotype", palatino, serif; font-size: 14.49px; line-height: 21.735px; text-align: justify;">
<span style="background-color: white;">Then, Run Command Prompt & go to the 'mysql' installation directory. In my case, It's C:/xampp/mysql.</span></div>
<div style="color: #333333; font-family: georgia, utopia, "palatino linotype", palatino, serif; font-size: 14.49px; line-height: 21.735px; text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div style="color: #333333; font-family: georgia, utopia, "palatino linotype", palatino, serif; font-size: 14.49px; line-height: 21.735px; text-align: justify;">
<span style="background-color: white; color: black; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace; font-size: 14.49px; line-height: 15.939px; white-space: pre;">cd d:/xampp/mysql</span></div>
<div style="text-align: justify;">
<div style="text-align: start;">
<span style="font-size: 14.49px; line-height: 15.939px; white-space: pre;"><span style="background-color: white; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace;"><br /></span></span></div>
<u style="background-color: white; color: #333333; font-family: georgia, utopia, "palatino linotype", palatino, serif; font-size: 14.49px; line-height: 21.735px;">Step 03</u><br />
<span style="background-color: white;"><span style="color: #333333; font-family: "georgia" , "utopia" , "palatino linotype" , "palatino" , serif;"><span style="font-size: 14.49px; line-height: 21.735px;">Then, locate </span></span><b style="color: #333333; font-family: Georgia, Utopia, "Palatino Linotype", Palatino, serif; font-size: 14.49px; line-height: 21.735px;">'resetroot.bat'</b><span style="color: #333333; font-family: "georgia" , "utopia" , "palatino linotype" , "palatino" , serif;"><span style="font-size: 14.49px; line-height: 21.735px;"> file and to edit it with notepad, run the following command in the command prompt.</span></span></span></div>
<div style="color: #333333; font-family: georgia, utopia, "palatino linotype", palatino, serif; font-size: 14.49px; line-height: 21.735px; text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div style="color: #333333; font-family: georgia, utopia, "palatino linotype", palatino, serif; font-size: 14.49px; line-height: 21.735px; text-align: justify;">
<span style="background-color: white; color: black; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace; font-size: 14.49px; line-height: 15.939px; white-space: pre;">notepad resetroot.bat</span></div>
<div style="color: #333333; font-family: georgia, utopia, "palatino linotype", palatino, serif; font-size: 14.49px; line-height: 21.735px; text-align: justify;">
<span style="background-color: white;"><span style="color: black; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace; font-size: 14.49px; line-height: 15.939px; white-space: pre;"><br /></span><u>Step 04</u></span><br />
<span style="background-color: white;">Find 'bin\mysqld.exe' in the .bat file & in the same line locate a text simliar to '--no-defaults'. Add the following text after leaving a space. Save the file.</span><br />
<div>
<div class="syntaxhighlighter perl" id="highlighter_235322" style="font-size: 1em; margin: 1em 0px; overflow: auto; position: relative; width: 541px;">
<div class="toolbar" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0px; border: none; bottom: auto; box-sizing: content-box; color: white; float: none; font-size: 10px; height: 11px; left: auto; line-height: 1.1em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: absolute; right: 1px; text-align: left; top: 1px; vertical-align: baseline; width: 11px; z-index: 10;">
<span style="background-color: white;"><br /></span></div>
</div>
</div>
<div style="color: #333333; font-family: georgia, utopia, "palatino linotype", palatino, serif; font-size: 14.49px; line-height: 21.735px; text-align: justify;">
<span style="background-color: white; color: black; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace; font-size: 14.49px; line-height: 15.939px; white-space: pre;">–datadir=c:/xampp/mysql/data</span></div>
<span style="background-color: white;"><br /></span>
<u style="background-color: white;">Step 05</u><br />
<span style="background-color: white;">Now, run resetroot.bat using Command Prompt. Then, Start MySQL service using XAMPP Control Panel.</span><br />
<span style="background-color: white;"><br /></span>
<span style="background-color: white;">That's it. You can reach PhpmyAdmin. Thank You.</span></div>
<div style="color: #333333; font-family: georgia, utopia, "palatino linotype", palatino, serif; font-size: 14.49px; line-height: 21.735px; text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz7RiHKqe7ms_bbBwovh-BXsAE1M1pUdzw1tEHfMzX79d9qcHS9Bigk-wg_tzmx6upcajnuhyphenhyphenCqm-BDU5sChs2m8adTSsk3e3AOcJKMAFAPSRj9equ3MliKw9iapkGwifZRen2hY2nL0/s1600/phpmyadmin.PNG" imageanchor="1" style="background-color: white; margin-left: 1em; margin-right: 1em;"><img border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz7RiHKqe7ms_bbBwovh-BXsAE1M1pUdzw1tEHfMzX79d9qcHS9Bigk-wg_tzmx6upcajnuhyphenhyphenCqm-BDU5sChs2m8adTSsk3e3AOcJKMAFAPSRj9equ3MliKw9iapkGwifZRen2hY2nL0/s320/phpmyadmin.PNG" width="320" /></a></div>
<div style="color: #333333; font-family: georgia, utopia, "palatino linotype", palatino, serif; font-size: 14.49px; line-height: 21.735px; text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<br />
<br /></div>
</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-82195023535596754532016-06-18T13:48:00.003-07:002017-01-20T12:33:43.305-08:00Uploading a local project into github<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
<ul style="text-align: left;">
<li>Crate a repository in your github account manually</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijpz8ijuikqeAQZk2Mcmlrjy6VgcIqJKU-b8C246sInN4m-AuRvynfR2UMTZyY5zXEUjO9bL9QuStI6s2x7UI5JLNKfz2Afy8T_aoQD-MHf6OqTjnRElUQ05Q2hb_oziW8AfPuhg9gABQ/s1600/14191482_10208292541208960_2043702974_o.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijpz8ijuikqeAQZk2Mcmlrjy6VgcIqJKU-b8C246sInN4m-AuRvynfR2UMTZyY5zXEUjO9bL9QuStI6s2x7UI5JLNKfz2Afy8T_aoQD-MHf6OqTjnRElUQ05Q2hb_oziW8AfPuhg9gABQ/s320/14191482_10208292541208960_2043702974_o.png" width="320" /></a></div>
<br />
<br />
From git shell, go to your project directory and initiate git into it<br />
<span style="color: red;">git init</span><br />
Now add your project all files to git<br />
<span style="color: red;">git add .</span><br />
Now locally commit your project files<br />
<span style="color: red;">git commit -m "Initial Commit"</span><br />
Now add your remote repository url to local git<br />
<span style="color: red;">git remote add origin https://github.com/imtiazUAP/uapians.git</span><br />
Now pull your remote repository (Read Me File into your local)<br />
<span style="color: red;">git pull</span><br />
If you wish to set tracking information for this branch you can do so with:<br />
<span style="color: red;">git branch --set-upstream-to=origin/master</span><br />
Now pull your remote repository (Read Me File into your local)<br />
<span style="color: red;">git pull</span><br />
Now push your local project into remote<br />
<span style="color: red;">git push -u origin master</span><br />
<div class="line number1 index0 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: #cccccc; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 14.85px; height: auto !important; left: auto !important; line-height: 16.335px; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<br /></div>
<script brush:="" class="" csharp="" quot="" syntaxhighlighter="" type="">
<![CDATA[
// Comment
public class Testing {
public Testing() {
}
public void Method() {
/* Another Comment
on multiple lines */
int x = 9;
}
}
]]></script> <br />
<h3 style="text-align: left;">
<span style="color: #0b5394;"><b>Done!</b></span></h3>
<br />
<span style="color: #444444;">This is a personal note of mine.</span></div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-29467756212665975762015-12-09T21:47:00.002-08:002017-01-08T09:36:50.669-08:00অ্যাবস্ট্রাকশান ঝামেলা<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #444444; font-family: "solaimanlipi"; font-size: 16px; text-align: justify;">“অ্যাবস্ট্রাক্ট” কথাটি শুনলে আমার বেশ কয়েকটি অ্যাবস্ট্রাক্ট-এর কথা মাথায় আসে। এর মধ্যে প্রথমটা হল- পেপারের অ্যাবস্ট্রাক্ট। ভেঙে বললে, বিভিন্ন বিষয়ে স্নাতক এবং স্নাতকোত্তর পর্যায়ে যেসব গবেষণা পত্র(reserch paper) লেখা হয়, সেগুলোর প্রথমে একটা প্যারা থাকে। যার নাম অ্যাবস্ট্রাক্ট। তো কী থাকে এই অ্যাবস্ট্রাক্ট-এ? সোজা কথায় পেপারটার সার-সংক্ষেপ। পুরো পেপার লেখার পর এর সার-সংক্ষেপ হিসেবে প্রথম প্যারাটি লেখা হয়। এতে ঐ পেপারের বিষয়বস্তু, পটভূমি, ক্ষেত্র ইত্যাদি ব্যাপার নিয়ে একটা ধারণা দেওয়া থাকে।</span><br />
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: SolaimanLipi; font-size: 16px; line-height: 1.6; margin-bottom: 1.25rem; padding: 0px; text-align: justify; text-rendering: optimizeLegibility;">
দ্বিতীয় অ্যাবস্ট্রাক্ট-টি হল শিল্পকলার অ্যাবস্ট্রাক্ট। অনেক ধরণের শিল্প আছে, যেমন আঁকা ছবি থেকে শুরু করে কবিতা হয়ে গল্প-উপন্যাস পর্যন্ত। কখন একটা ছবি বা কবিতাকে অ্যাবস্ট্রাক্ট বলা হয়? যখন ওটার বিষয়বস্তু ঠিক সহজে বোঝা যায় না(মাথার উপর দিয়ে যায়)। অনেক সময় আমাদের মত অজ্ঞরা শেষ পর্যন্ত এর মাথা-মুন্ডু কিছুই না বুঝে বলি “ভাই মাফ চাই।” আবার অনেক বিশেষজ্ঞরা সেখান থেকে মূল শিল্পী যা বোঝাতে চেয়েছেন, তার থেকেও বেশি বুঝে ফেলতে পারেন! শুনেছিলাম রবীন্দ্রনাথের “সোনার তরী” কবিতাটা নিয়েও নাকি এমন হয়েছিল।</div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: SolaimanLipi; font-size: 16px; line-height: 1.6; margin-bottom: 1.25rem; padding: 0px; text-align: justify; text-rendering: optimizeLegibility;">
শেষ অ্যাবস্ট্রাক্ট-টি একটু টেকি। এটা কম্প্যুটার সায়েন্সের বা আরও ভাল করে বললে প্রোগ্রামিং ল্যাঙ্গুয়েজের বিষয়। তাও একটু সহজভাবে বলার চেষ্টা করি। Object oriented programming-এ আমরা কোন বস্তু(object)-এর কিছু বৈশিষ্ট্য এবং কাজ নির্ধারণ করে তার একটা সাধারণ নাম দেওয়া যায়। ব্যাপারটাকে বলে একটা class-কে সংজ্ঞায়িত(define) করা। তখন ঐ জাতীয় সব বস্তুকে ঐ নির্দিষ্ট ক্লাস(class)-এর অন্তুর্ভুক্ত ধরা হবে। একই ক্লাসের সব অবজেক্টেরi ঐসব সাধারণ বৈশিষ্ট্য এবং কাজ করার ক্ষমতা থাকবে। যেমন আমি “মানুষ” ক্লাসের একটা object। সুতরাং মানুষ হিসেবে আমার কিছু বৈশিষ্ট্য এবং কাজ করার ক্ষমতা থাকবে। এখন কিছু কিছু class আছে যাদের বলা হয় abstract class। ক্ষেত্রবিশেষে যাকে interface-ও বলা হয়। এই অ্যাবস্ট্রাক্ট ক্লাসের বেলায় কী হয়? ক্লাসের সমস্ত বৈশিষ্ট্য বিস্তারিত ভাবে নির্ধারণ করা থাকে না। অল্প কিছু বৈশিষ্ট্য দেওয়া থাকে। সেটাও বিস্তারিত ভাবে থাকে না। সেজন্য কোন অবজেক্ট বা বস্তু শুধুমাত্র এই ক্লাসের সদস্য হতে পারে না। যেমন ধরুন- “জলজ”। এটা থেকে বুঝা গেল যে জিনিসটা পানিতে থাকে। কিন্তু আর কিছুই জানা গেল না যে সেটা- প্রাণী না উদ্ভিদ, ছোট না বড়, এমনকি জীব না জড়, এসব কিছুই না। সেজন্যই শুধুমাত্র জলজ বলে কিছু নাই। সেটা অবশ্যই “জলজ আগাছা” বা “জলজ স্তন্যপায়ী” ইত্যাদি।</div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: SolaimanLipi; font-size: 16px; line-height: 1.6; margin-bottom: 1.25rem; padding: 0px; text-align: justify; text-rendering: optimizeLegibility;">
এই হল বিভিন্ন ধরণের অ্যাবস্ট্রাক্ট। যা যা এখন মাথায় আসল। সবার কাছে ক্ষমা চেয়ে নিচ্ছি এমন খটমটে বিষয় নিয়ে লিখছি বলে। আর ইংরেজি শব্দটাই ব্যবহার করছি। কারণ বাংলা প্রতিশব্দ- “বিমূর্ত” আমার কাছে কেমন জানি আরও বেশি “বিমূর্ত বিমূর্ত” মনে হয় :s। কেমন যেন ধোঁয়াশার মত শব্দটা, মানেটা ঠিক ধরা যায় না। আশা করি এখন আমি অ্যাবস্ট্রাক্ট শব্দের অর্থটা খানিকটা হলেও বুঝাতে পেরেছি। তবে যারা আগে থেকেই জানতেন তারা তো জানতেনই! অ্যাবস্ট্রাক্ট শব্দের মানেটা অনেকটা এমন- কোন কিছুটে একদম ভেঙে ভেঙে না বলে, অণু-পরমানূ, ইলেকট্রন-ফোটন পর্যন্ত বিস্তারিত পর্যায়ে না গিয়ে, মোটামুটি একটা সারসংক্ষেপ ধারণা দিয়ে দেওয়া। এটারও নির্দিষ্ট কোন পর্যায় নেই। অনেকটা মাইক্রোস্কোপের ফোকাস ঠিক করার মত। আপনি যত গভীরে ফোকাস সেটা করবেন, ততখানি গভীরে দেখতে পারবেন। অর্থাৎ অ্যাবস্ট্রাকশান কমে গেল। অন্যদিকে আপনি যদি ফোকাস অতটা গভীরে সেট না করেন, তাহলেই অ্যাবস্ট্রাকশান বেড়ে গেল।</div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: SolaimanLipi; font-size: 16px; line-height: 1.6; margin-bottom: 1.25rem; padding: 0px; text-align: justify; text-rendering: optimizeLegibility;">
আরেকটা উদাহরণ দিই। ধরুন আমি পৃথিবীর মানচিত্রে “ঢাকা” খুঁজলাম। পেলাম না। কোনরকমে “বাংলাদেশ” লেখাটা দেখা যায়। এরপর দক্ষিণ এশিয়ার মানচিত্রে আসলাম। ঢাকা খুঁজে পাওয়া গেল। মোটামুটি আইডিয়া পাওয়া গেল যে ঢাকা বাংলাদেশের মাঝামাঝি একটা জায়গায়। এরপর বাংলাদেশের মানচিত্রে এসে ঢাকার সীমানা দেখা গেল। জায়গাটা কত বড় বোঝা গেল। এরপর ঢাকার মানচিত্রে এলে এর বিভিন্ন এলাকা রাস্তাঘাট ইত্যাদি সম্পর্কেও আইডিয়া পাওয়া যাবে। প্রথমে “ঢাকা” কিন্তু একটা নাম অথবা শব্দ ছিল মাত্র। কিন্তু প্রত্যেকটা ধাপে আমরা ঢাকা সম্পর্কে আরেকটু বেশি তথ্য জানতে পেরেছি। এতে ঢাকা ব্যাপারটার অ্যাবস্ট্রাকশান কমে গেছে। বা অন্যভাবে বললে “ঢাকা” ধাপে ধাপে আমাদের কাছে একটা “কংক্রিট”(concrete-অ্যাবস্ট্রাক্ট এর বিপরীত শব্দ) বা মূর্ত আইডিয়া হয়ে উঠেছে। আরও বেশি কংক্রিট হবে যখন আমি ঢাকায় থাকছি, ঢাকার রাস্তায় চলছি, ঢাকার বাতাসে শ্বাস নিচ্ছি। ঢাকা তখন আমার কাছে পুরোপুরি বাস্তব বা কংক্রিট একটা ব্যাপার।</div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: SolaimanLipi; font-size: 16px; line-height: 1.6; margin-bottom: 1.25rem; padding: 0px; text-align: justify; text-rendering: optimizeLegibility;">
আমাদের বাস্তব জীবনেও অ্যাবস্ট্রাকশান একটি অতি প্রয়োজনীয় ব্যাপার। আমরা প্রায় সব ক্ষেত্রেই এটা ব্যবহারও করি। আবার সেই মাইক্রোস্কোপের কথাতেই ফেরত আসি। আমি যদি কোন একটা বস্তু, ধরুন একটা কোষ তার একদম গভীরে ফোকাস করি, যে অংশটায় ফোকাস করা হবে, সে অংশটা আমি খুব ভালভাবে দেখতে পারব। সেই অংশের গঠন বেশি বুঝতেও পারব। কিন্তু পাশের অন্য কিছু অংশ আমার ফোকাস থেকে হারিয়ে যাবে। আমি নিউক্লিয়াস আর মাইট্রোকন্ডিয়া একইসাথে নিখুঁতভাবে দেখতে পারব না। যেকোন একটা দেখতে হবে। অথবা ফোকাসটা এমনভাবে করতে হবে যে, দুটোই দেখতে পাব, কিন্তু কোনটাই গভীরভাবে না। আমাদের মানে এক একজন ব্যক্তি মানুষের জ্ঞান জগতটাও কিন্তু এরকম। আমরা সবাই সবকিছুর উপর একটা মোটামুটি অ্যাবস্ট্রাক্ট ধারণা রাখি। তবে সবাই কোন না কোন বিশেষ ক্ষেত্রে বিস্তারিত জানি। আমি হয়ত কম্প্যুটার নিয়ে বেশি জানি। কিন্তু ধান চাষ, মানব শরীরের গঠন-প্রকৃতি বা মহাশুণ্য নিয়ে খুব বেশি কিছু জানি না। যতটুকু জানি, সেটাই হল অ্যাবস্ট্রাক্ট জ্ঞান। এটাই হল বিভিন্ন ক্ষেত্রে অ্যাবস্ট্রাকশান এর ব্যবহার। বিভিন্ন ক্ষেত্রে মোটামুটি একটা অ্যাবস্ট্রাক্ট জ্ঞান রেখে আমরা চলি। দরকারমত অন্যদের থেকে সাহায্য নিই, আবার অন্যদের সাহায্যও করি।</div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: SolaimanLipi; font-size: 16px; line-height: 1.6; margin-bottom: 1.25rem; padding: 0px; text-align: justify; text-rendering: optimizeLegibility;">
লেখাটার নাম দিয়েছিলাম, অ্যাবস্ট্রাকশান ঝামেলা। তা এর মধ্যে ঝামেলা আসল কোথা থেকে? ঝামেলা তখনই হবে যখন কোন জিনিস বা ধারণা প্রয়োজনের তুলনায় বেশি অ্যাবস্ট্রাক্ট হয়ে যায়। বা আরেকটু স্পষ্ট করে বললে, যেসব অ্যাবস্ট্রাক্ট ধারণাকে বিভিন্নভাবে রিয়ালাইজেশনের(অ্যাবস্ট্রাক্ট থেকে কংক্রিট হওয়ার প্রক্রিয়া) মাধ্যেম ভিন্ন ভিন্ন ধারণা দাঁড় করানো যায়, সমস্যা সেখানেই। আমার কাছে মনে হয়েছে, এমন সমস্যা অনেক জায়গাতেই আছে। একটা উদাহরণ দিই। কয়েকদিন আগে “ফতোয়া” শব্দটা নিয়ে অনেক তর্ক-বিতর্ক হয়ে গেল। পক্ষে-বিপক্ষে নানা প্রবান্ধ-বিবৃতি-মিছিল-মিটিং। কিন্তু আমার যেটা মনে হয়েছে, এই বিরোধের মূল কারণ হল “ফতোয়া” একটি অ্যাবস্ট্রাক্ট শব্দ। এবং এর পক্ষ-বিপক্ষ দুই দল একে দুইভাবে রিয়ালাইজেশন করে দুই অর্থ দাঁড় করিয়েছেন। এবং দুই পক্ষ নিজেদের দাঁড় করানো অর্থের কারণেই এর পক্ষে বা বিপক্ষে অবস্থান নিয়েছেন।</div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: SolaimanLipi; font-size: 16px; line-height: 1.6; margin-bottom: 1.25rem; padding: 0px; text-align: justify; text-rendering: optimizeLegibility;">
আসুন দেখা যাক, দুই পক্ষ শব্দটির কী কী অর্থ দাঁড় করিয়েছেন। যারা ফতোয়ার পক্ষে ছিলেন তাদের মতে ফতোয়া হল-“ধর্মীয় কোন ব্যাপারে কোন আলেমের কাছে কিছু জানতে চাওয়া।” সেটা যেকোন কিছু সম্পর্কে হতে পারে। এবং জানার পর সেটা প্রশ্নকর্তা নিজ দায়িত্বে মানবেন। তাদের মতে প্রশ্ন করার এবং উত্তর জানাটা সবার অধিকার। সুতরাং ফতোয়া নিষিদ্ধের কোন অর্থ নাই। আর অন্য পক্ষের মতে ফতোয়া হল-“দেশের প্রচলিত আইন এবং বিচার ব্যবস্থার বাইরে বিচার এবং দন্ড। যার বেশির ভাগই হয় কোন মোল্লা-মৌলবীর কথা অনুসারে।” দেখাই যাচ্ছে যে, দুই পক্ষ শব্দটিকে যেভাবে দেখছেন তার মধ্যে মিল খুব সামান্যই। এবং আমি কোন পক্ষকেই আপর পক্ষের গৃহীত অর্থকে বিবেচনায় নিতে দেখিনি। শুধু একটা লেখা দেখেছিলাম যেখানে একজন আলেম বলেছেন, একমাত্র রাষ্ট্র বা শাসকই বিচার ব্যবস্থার মাধ্যমে দন্ড প্রয়োগ করতে পারবে। অন্য কেউ নয়। সেটা ইসলামী নিয়মানুসারে হলেও। এখানে ফতোয়া বিরোধী পক্ষ যদি “ফতোয়া” শব্দটি ব্যবহার না করে, “দেশের আইন বহির্ভূত বিচার ও দন্ড” নিষিদ্ধের কথা বলতেন, তাহলে ফতোয়ার পক্ষাবলম্বনকারী গোষ্ঠীর আন্দোলনের কোন ক্ষেত্রই তৈরি হত না। কারণ এর বিরুদ্ধে আন্দোলনের তো সুযোগ নেই। আলেমদের কথা অনুসারেই। এত ঝামেলাও হত না। আর যারা ফতোয়ার পক্ষে আন্দোলন করছেন, তারাও শুধু “ফতোয়া” শব্দটিকে না দেখে, কেন ফতোয়ার বিরুদ্ধে আন্দোলন হচ্ছে সেদিকে খেয়াল করতেন তাহলেও ঝামেলা অনেকটা কমত। আমার কাছে পুরো ব্যাপারটাকেই মনে হয়েছে অতিরিক্ত অ্যাবস্ট্রাক্ট শব্দ ব্যবহারজনিত একটি সমস্যা। <img alt=":-B" class="wp-smiley" src="https://www.cadetcollegeblog.com/wp-includes/images/smilies/26.gif" style="background: none !important; border: none !important; box-shadow: none !important; box-sizing: border-box; display: inline !important; height: 1em; margin: 0px 0.07em !important; max-height: 1em; max-width: 100%; padding: 0px !important; vertical-align: -0.1em !important; width: 1em !important;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: SolaimanLipi; font-size: 16px; line-height: 1.6; margin-bottom: 1.25rem; padding: 0px; text-align: justify; text-rendering: optimizeLegibility;">
এমন আরেকটি সমস্যায় আসি। কিছুদিন আগে সংবিধান সংশোধন হল। সেটা নিয়ে নানা হই-চই আন্দোলন ইত্যাদি হল। তার অনেকগুলো কারণের মধ্যে বড় একটা কারণ হল সংবিধানের মূলনীতিগুলো- গণতন্ত্র, সমাজতন্ত্র, ধর্মনিরপেক্ষতা এবং জাতীয়তাবাদ। আমার কাছে মনে হয়েছে সবগুলোই বেশ অ্যাবস্ট্রাক্ট শব্দ। এবং বিভিন্ন গোষ্ঠী এসব শব্দের বিভিন্ন অর্থ দাঁড় করিয়ে তার পক্ষে-বিপক্ষে আন্দোলন করে গেলেন। নানা ধরণের কথা বললেন। আমার আগের একটা <a href="http://www.cadetcollegeblog.com/gulshan/28876" style="box-sizing: border-box; color: #008cba; line-height: inherit; text-decoration: none; transition: all 100ms linear;">পোস্টে</a> এজন্য আমি এমন সব অ্যাবস্ট্রাক্ট শব্দের একটা কংক্রিট ব্যাখ্যাও সংবিধানের অন্তর্ভুক্ত করার পক্ষে মত দিয়েছিলাম। যেন আমাদের মধ্যে শব্দগুলোর অর্থ নিয়ে কোন দ্বিধা না থাকে। আর কেউ সেগুলোর সুযোগ নিতে না পারে।</div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: SolaimanLipi; font-size: 16px; line-height: 1.6; margin-bottom: 1.25rem; padding: 0px; text-align: justify; text-rendering: optimizeLegibility;">
লিখতে লিখতে অনেক কথাই লেখা হয়ে গেল। জানি না কথাগুলো ঠিকমত বলতে পারলাম কিনা। তবে আমি চাইব, আমাদের সব ক্ষেত্রে পরিমিত পরিমাণ অ্যাবস্ট্রাকশান ব্যবহার করা হোক। আর আমরা সবাই এমন কিছু নিয়ে কথা বলার সময় নিজের কথাগুলোকে আরও স্পষ্ট করে বলি। আর কিছু শব্দ নিয়ে না থেকে শব্দ দ্বারা কী বুঝানো হচ্ছে, অন্যরা কী বুঝছে, সেই “ভাব” বিবেচনায় রাখি।</div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: SolaimanLipi; font-size: 16px; line-height: 1.6; margin-bottom: 1.25rem; padding: 0px; text-align: justify; text-rendering: optimizeLegibility;">
অ্যাবস্ট্রাকশান নিয়ে আরও পড়তে চাইলে <a href="http://en.wikipedia.org/wiki/Abstraction" style="box-sizing: border-box; color: #008cba; line-height: inherit; text-decoration: none; transition: all 100ms linear;">উইকিপিডিয়াতে</a> যেতে পারেন। তবে আমি <a href="http://programmers.stackexchange.com/q/16070/963" style="box-sizing: border-box; color: #008cba; line-height: inherit; text-decoration: none; transition: all 100ms linear;">এইখানেও</a> যেতে বলব। এখানে প্রশ্ন করা হয়েছে অ্যাবস্ট্রাকশান কী? তার অনেকগুলো উত্তর আছে। আমার লেখা একটা উত্তরও আছে।<br />
<br />
<br />
মুল লেখক এবং লিংক<br />
<div style="color: black; font-family: "Times New Roman"; font-size: medium; text-align: left;">
<span class="byline" style="box-sizing: border-box; color: #aaaaaa; font-family: "solaimanlipi"; font-size: 16px; line-height: 24px;">লেখক: <span class="author" style="box-sizing: border-box; color: #999999; font-size: 0.9375rem;"><a class="url fn n" href="http://www.cadetcollegeblog.com/author/gulshan" style="box-sizing: border-box; color: #008cba; line-height: inherit; text-decoration: none; transition: all 100ms linear;" title="View all posts by গুলশান (১৯৯৯-২০০৫)">গুলশান (১৯৯৯-২০০৫)</a></span></span></div>
<div style="color: black; font-family: "Times New Roman"; font-size: medium; text-align: left;">
<span class="cat-links" style="box-sizing: border-box; color: #aaaaaa; font-family: "solaimanlipi"; font-size: 16px; line-height: 24px;">বিভাগ: <a href="http://www.cadetcollegeblog.com/category/colleges/jcc" rel="category tag" style="box-sizing: border-box; color: #008cba; line-height: inherit; text-decoration: none; transition: all 100ms linear;">ঝিনাইদহ</a>, <a href="http://www.cadetcollegeblog.com/category/philosophy" rel="category tag" style="box-sizing: border-box; color: #008cba; line-height: inherit; text-decoration: none; transition: all 100ms linear;">দর্শন</a>, <a href="http://www.cadetcollegeblog.com/category/articles" rel="category tag" style="box-sizing: border-box; color: #008cba; line-height: inherit; text-decoration: none; transition: all 100ms linear;">প্রবন্ধ</a>, <a href="http://www.cadetcollegeblog.com/category/uncategorized" rel="category tag" style="box-sizing: border-box; color: #008cba; line-height: inherit; text-decoration: none; transition: all 100ms linear;">ব্লগর ব্লগর</a></span></div>
<div style="color: black; font-family: "Times New Roman"; font-size: medium; text-align: left;">
<span style="color: #aaaaaa; font-family: "solaimanlipi"; font-size: 16px;">http://www.cadetcollegeblog.com/gulshan/31901</span></div>
</div>
</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-12297612437592494492015-06-27T10:02:00.002-07:002015-06-27T10:02:44.729-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title" itemprop="name" style="background-color: #333333; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 22px; font-stretch: normal; font-weight: normal; margin: 0.75em 0px 0px; position: relative;">
Problem #1: "Prolog-Interpreter /bin/plwin.exe not found. Please configure correctly."</h3>
<div class="post-header" style="background-color: #333333; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 10.8000001907349px; line-height: 1.6; margin: 0px 0px 1.5em;">
<div class="post-header-line-1">
</div>
</div>
<div class="post-body entry-content" id="post-body-2703789945427549167" itemprop="description articleBody" style="background-color: #333333; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.1999998092651px; line-height: 1.4; position: relative; width: 620px;">
<h2 style="font-size: 22px; margin: 0px; position: relative;">
Description</h2>
While trying to use SWI-Prolog-Editor the following error appears in the bottom pane:<br /><blockquote class="tr_bq">
Prolog-Interpreter /bin/plwin.exe not found. Please configure correctly.</blockquote>
<br /><h2 style="font-size: 22px; margin: 0px; position: relative;">
Solution</h2>
<blockquote class="tr_bq">
You should double check to see which version of swi-prolog you installed (32-bit or 64-bit), because swi-prolog editor only works with the 32-bit version. If you tried using the editor with the 64-bit version, you'll get the error described above</blockquote>
</div>
</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com1tag:blogger.com,1999:blog-2922136593025928727.post-73409676900279193442014-02-09T08:44:00.002-08:002016-08-30T12:43:13.079-07:00ABC for Dynamic Web Developer<div dir="ltr" style="text-align: left;" trbidi="on">
<h4 style="text-align: left;">
<b><span style="color: red;">Connection with Database...</span></b><span style="color: red;">(name it as connection.php)</span></h4>
<div>
<div style="font-weight: bold;">
<?php</div>
<div style="font-weight: bold;">
$servername="localhost";</div>
<div style="font-weight: bold;">
$username="root";</div>
<div style="font-weight: bold;">
$password="";</div>
<div style="font-weight: bold;">
$databasename="actual_db";</div>
<div style="font-weight: bold;">
?></div>
<div style="font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
<br /></div>
<h3 style="text-align: left;">
<span style="color: red;">For Delete an Entity... <span style="font-weight: normal;">(delete.php)</span></span></h3>
<div style="font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
<div>
<?php</div>
<div>
include ("connection.php");</div>
<div>
$connect=mysql_connect($servername,$username,$password);</div>
<div>
$select_db=mysql_select_db($databasename);</div>
<div>
<br /></div>
<div>
$strquery=" DELETE from records_table where id = '" . $_GET['id'] . "' ";</div>
<div>
$results=mysql_query ($strquery);</div>
<div>
echo 'Delete Successfull!!';</div>
<div>
header ('location: https://127.0.0.1/ACTUAL/MAIN.php ');</div>
<div>
?></div>
</div>
<div style="font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
<br /></div>
<h3 style="text-align: left;">
<span style="color: red;"><u>Edit....</u><span style="font-weight: normal;">(edit.php)</span></span></h3>
<div style="font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
<div>
<?php</div>
<div>
include ("connection.php");</div>
<div>
$connect=mysql_connect($servername,$username,$password);</div>
<div>
$select_db=mysql_select_db($databasename);</div>
<div>
<br /></div>
<div>
$strquery = "SELECT * from records_table where id= '" . $_GET["id"] . "' ";</div>
<div>
$results = mysql_query ($strquery);</div>
<div>
$row = mysql_fetch_array($results);</div>
<div>
<br /></div>
<div>
?></div>
<div>
<body></div>
<div>
<br /></div>
<div>
<form id="form1" name="form1" method="get" action="update.php"></div>
<div>
<label>Name:</div>
<div>
<input name="name" type="text" id="name" value=" <?php echo $row["name"]; ?>" /></div>
<div>
</label></div>
<div>
<p></div>
<div>
<label>Section:</div>
<div>
<input name="section" type="text" id="section" value=" <?php echo $row["section"]; ?>" /></div>
<div>
</label></div>
<div>
<input name="id" type="hidden" id="section2" value=" <?php echo $row["id"]; ?>" /></div>
<div>
</p></div>
<div>
<p></div>
<div>
<label></label></div>
<div>
</p></div>
<div>
<p></div>
<div>
<label></div>
<div>
<input type="submit" name="Submit" value="Update" /></div>
<div>
</label></div>
<div>
</p></div>
<div>
</form></div>
</div>
<div style="font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
<br /></div>
<h2 style="text-align: left;">
<u><b><span style="color: red;">Main Page...... </span></b></u><span style="font-weight: normal;"><span style="color: red;">(main.php)</span></span></h2>
<div style="font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
<div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></div>
<div>
<html xmlns="http://www.w3.org/1999/xhtml"></div>
<div>
<head></div>
<div>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></div>
<div>
<title>Actual PHP</title></div>
<div>
</head></div>
<div>
<br /></div>
<div>
<body></div>
<div>
<form id="add" name="add" method="get" action="SAVE.php"></div>
<div>
<label>NAME:</div>
<div>
<input name="name" type="text" id="name" /></div>
<div>
</label></div>
<div>
<p></div>
<div>
<label>SECTION:</div>
<div>
<input name="section" type="text" id="section" /></div>
<div>
</label></div>
<div>
</p></div>
<div>
<p></div>
<div>
<label></div>
<div>
<input type="submit" name="Submit" value="SAVE" /></div>
<div>
</label></div>
<div>
</p></div>
<div>
</form></div>
<div>
<br /></div>
<div>
<table width="749" border="1"></div>
<div>
<tr></div>
<div>
<td width="289">Name</td></div>
<div>
<td width="214">Section</td></div>
<div>
<td width="57"> ID </td></div>
<div>
<td width="161"> Actions </td></div>
<div>
</tr></div>
<div>
<br /></div>
<div>
<?php</div>
<div>
include ("connection.php");</div>
<div>
$connect=mysql_connect($servername,$username,$password);</div>
<div>
$select_db=mysql_select_db($databasename);</div>
<div>
<br /></div>
<div>
$strquery="SELECT * from records_table";</div>
<div>
$results=mysql_query($strquery);</div>
<div>
$num=mysql_numrows($results);</div>
<div>
<br /></div>
<div>
$i=0;</div>
<div>
while ($i< $num)</div>
<div>
<br /></div>
<div>
{</div>
<div>
<br /></div>
<div>
$f1=mysql_result($results,$i,"name");</div>
<div>
$f2=mysql_result($results,$i,"section");</div>
<div>
$f3=mysql_result($results,$i,"id");</div>
<div>
<br /></div>
<div>
?></div>
<div>
<br /></div>
<div>
<tr></div>
<div>
<td><?php echo $f1 ; ?></td></div>
<div>
<td><?php echo $f2 ; ?></td></div>
<div>
<td><?php echo $f3 ; ?></td></div>
<div>
<td><?php echo " <a href='edit.php?do=edit&id=" . $f3 . "'> edit </a> "; ?> | <?php echo " <a href='delete.php?id=" . $f3 . "'> delete </a> "; ?></td></div>
<div>
</tr></div>
<div>
<br /></div>
<div>
<?php</div>
<div>
<br /></div>
<div>
$i++;</div>
<div>
}</div>
<div>
?></div>
<div>
<tr></div>
<div>
<td>&nbsp;</td></div>
<div>
<td>&nbsp;</td></div>
<div>
<td>&nbsp;</td></div>
<div>
<td>&nbsp;</td></div>
<div>
</tr></div>
<div>
</table></div>
<div>
<form id="form1" name="form1" method="get" action="search.php"></div>
<div>
<label>Search:</div>
<div>
<input name="search" type="text" id="search" /></div>
<div>
</label></div>
<div>
<p></div>
<div>
<label></div>
<div>
<input name="do" type="submit" id="do" value="Search" /></div>
<div>
</label></div>
<div>
</p></div>
<div>
</form></div>
<div>
<p>&nbsp;</p></div>
<div>
<p>&nbsp;</p></div>
<div>
<p></div>
<div>
<br /></div>
<div>
</p></div>
<div>
<p>&nbsp;</p></div>
<div>
<p>&nbsp;</p></div>
<div>
<p>&nbsp; </p></div>
<div>
</body></div>
<div>
</html></div>
</div>
<div style="font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
<br /></div>
<h3 style="text-align: left;">
<span style="color: red;"><u>Save </u><span style="font-weight: normal;">(save.php)</span></span></h3>
<div style="font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
<div>
<?php</div>
<div>
include ("connection.php");</div>
<div>
$connect=mysql_connect($servername,$username,$password);</div>
<div>
$select_db=mysql_select_db($databasename);</div>
<div>
<br /></div>
<div>
$strquery="INSERT INTO records_table SET name= '" . $_GET['name'] . "', section= '". $_GET['section'] ."' ";</div>
<div>
$results=mysql_query ($strquery);</div>
<div>
header( 'Location: https://127.0.0.1/ACTUAL/MAIN.php' ) ;</div>
<div>
?></div>
</div>
<div style="font-weight: bold;">
<br /></div>
<h3 style="text-align: left;">
<span style="color: red;"><br /><u>For Update...</u><span style="font-weight: normal;">(update.php)</span></span></h3>
<div style="font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
<div>
<?php</div>
<div>
include ("connection.php");</div>
<div>
$connect=mysql_connect($servername,$username,$password);</div>
<div>
$select_db=mysql_select_db($databasename);</div>
<div>
<br /></div>
<div>
$strquery="UPDATE records_table SET name= '" . $_GET['name'] . "', section= '". $_GET['section'] ."' WHERE id='". $_GET['id'] ."' ";</div>
<div>
$results=mysql_query ($strquery);</div>
<div>
<br /></div>
<div>
header ('location: https://127.0.0.1/ACTUAL/MAIN.php '); </div>
<div>
<br /></div>
<div>
?></div>
<div>
<br /></div>
<div>
$strquery="UPDATE s_info SET SName= '" . $_GET['SName'] . "', SReg= '". $_GET['SReg'] ."',SAge='". $_GET['SAge'] ."',SHouse= '" </div>
<div>
. $_GET['SHouse'] . "',STransport= '" . $_GET['STransport'] . "',SQuality= '" . $_GET['SQuality'] . "',SHome_City= '" . $_GET['SHome_City'] . "',</div>
<div>
SPh_Number= '" . $_GET['SPh_Number'] . "',SE_Mail= '" . $_GET['SE_Mail'] . "',SB_of_Date= '" . $_GET['SB_of_Date'] . "',</div>
<div>
SPortrait= '" . $_GET['SPortrait'] . "' where SRoll='".$_GET['SRoll']."'";</div>
</div>
<div style="font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
<br /></div>
</div>
</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-87285479518809553962013-04-29T02:27:00.001-07:002016-08-30T12:43:24.342-07:00insertion sort in C++<div dir="ltr" style="text-align: left;" trbidi="on">
#include<stdio.h><br />
int main(){<br />
<br />
int m,n,s,temp,a[20];<br />
<br />
printf("Enter how many elements you want to sort? ");<br />
printf ("\n\n");<br />
scanf("%d",&s);<br />
<br />
printf("Enter that %d elements: ",s);<br />
printf ("\n");<br />
for(m=0;m<s;m++)<br />
scanf("%d",&a[m]);<br />
<br />
for(m=1;m<s;m++){<br />
temp=a[m];<br />
n=m-1;<br />
while((temp<a[n])&&(n>=0)){<br />
a[n+1]=a[n];<br />
n=n-1;<br />
}<br />
a[n+1]=temp;<br />
}<br />
<br />
printf("The elements are sorted : ");<br />
for(m=0;m<s;m++)<br />
printf(" %d\n\n",a[m]);<br />
<br />
return 0;<br />
}<br />
<br />
<br /></div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-52233774135594457012013-04-26T11:50:00.002-07:002016-08-30T12:40:04.179-07:00আমি দেশকে কি দিলাম?<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #37404e; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px;">সবাই কথায়-কথায় বলে " দেশ আমাকে কি দিল?" কিন্তু আমি আমাকে বলি " আমি দেশকে কি দিলাম?" আমার এই একটি কথার জন্যেই আজ পর্যন্ত কখনো এই দেশটাকে আমি দোষারোপ করিনি । কিন্তু আজ কেন জানি প্রচণ্ড অভিমান হছে এই হতভাগা দেশের উপরে ।</span><br style="background-color: white; color: #37404e; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px;" /><br style="background-color: white; color: #37404e; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px;" /><span style="background-color: white; color: #37404e; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px;">শত লোক মারা গেল । বিরোধী দল বলে "দোষী সরকারী দল" সরকারী দল বলে "দোষী বিরোধী দল" প্রধানমন্ত্রী বলে "দোষী ব্যাক্তি আমার দলের নয়" দেশের স্বরাষ্ট্র মন্ত্রীর কথা না ই বললাম... এখনো শত প</span><span class="text_exposed_show" style="background-color: white; color: #37404e; display: inline; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px;">্রান আটকা পড়ে আছে মরন কূপে আর আমরা শুরু করেছি আমাদের নোংরা রাজনীতি । চারিদিকে অনেক বাস্তব আর কঠিন-কঠিন কমেডিও শুনছি। আজকে একজন বললো " যে হারে হাত পা কাটা লোক বের করা হচ্ছে, তাতে করে দেশে তো এবার ফকিরের সংখ্যা বেড়ে যাবে "একটা টিভি চ্যানেল দেখলাম খেলার স্কোর বোর্ডের মত করে লাশের স্কোর বোর্ড তুলে দিয়েছে টিভিতে । সারা দেশে মাত্র একটা মাত্র একটা বিল্ডিং ভেঙে পড়েছে । সরকারী ৪ বাহিনী মিলে এখনো সেই একটা বিল্ডিং এর মানুষদেরকে উদ্ধার করতে পারলো না । কাল রাতে শুনলাম টর্চলাইট নাই । সবাইকে বাসা থেকে টর্চলাইট আনার জন্যে অনুরোধ করা হচ্ছে । এই হল আমার দেশের দুর্যোগ ব্যাবস্থাপনা !!! আর এই ভবনের মালিক যাকে আজ দেশের প্রত্যেকটা<br />মানুষ জবাবদিহির জন্যে খুঁজছে সে না কি ৩২ কোটি চোখকে ফাকি দিয়ে বিদেশ চলে গেলো ।।<br />হে আল্লাহ্ তুমি আমাদের সহায় হও । আর সকলের কাছে অনুরোধ আপনারা একে অপরকে দোষারোপ না করে যে যেভাবে পারেন সাহাযয়ের হাত বাড়িয়ে দেন ।</span></div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-4917899823351818792013-03-10T14:58:00.002-07:002013-03-10T20:55:55.491-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6w9xctkmd-CQ2ldbYGgvf8khhurD9SDHOd9I8CFEDeJ7vQkdRcrIbKxSvwmtak_IALJ6OS2G17PFg9k_ua-BIusBSlHzJc0IR-U6ewf0qB-blLK9RwJDT_CR-YDO5t1908CGnpCi6NUw/s1600/a2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6w9xctkmd-CQ2ldbYGgvf8khhurD9SDHOd9I8CFEDeJ7vQkdRcrIbKxSvwmtak_IALJ6OS2G17PFg9k_ua-BIusBSlHzJc0IR-U6ewf0qB-blLK9RwJDT_CR-YDO5t1908CGnpCi6NUw/s320/a2.jpg" width="309" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br /></div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-40952058119873418562013-03-10T14:55:00.005-07:002013-03-10T14:55:43.094-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH9SNcxHUTc84OtDwgJVE-9R4SOOhRcUEvkE00eECiziJHrw0uHvKhyphenhyphenrY3jRENHHHr4k3kSxY5L7__SMS-eG52seNqMv3K3kfcBxTlB_We0dpmLk9KRMGpU1caPtBgKxPq0-F4ZLkQ180/s1600/1_1_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="83" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH9SNcxHUTc84OtDwgJVE-9R4SOOhRcUEvkE00eECiziJHrw0uHvKhyphenhyphenrY3jRENHHHr4k3kSxY5L7__SMS-eG52seNqMv3K3kfcBxTlB_We0dpmLk9KRMGpU1caPtBgKxPq0-F4ZLkQ180/s320/1_1_1.jpg" width="320" /></a></div>
</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-79150251697133862612013-03-10T14:50:00.001-07:002016-08-30T12:39:17.809-07:00C++ Code For Linear Search<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
#include<iostream.h><br />
<br />
class searching<br />
{<br />
private:<br />
double *array;<br />
int n;<br />
public:<br />
void input();<br />
void linearsearch();<br />
};<br />
<br />
void searching::input()<br />
{<br />
cout<<”*********************************…<br />
<<”This program is to implement linear search algorithm\n”<br />
<<”*************************************…<br />
cout<<”Enter how many numbers you are going to enter::”;<br />
cin>>n;<br />
array=new double[n+1];<br />
cout<<”Now enter your elements ::\n”;<br />
for(int i=1;i<=n;i++)<br />
cin>>array[i];<br />
}<br />
<br />
void searching::linearsearch()<br />
{<br />
cout<<”Enter the number to be searched ::”;<br />
double x;<br />
cin>>x;<br />
int i;<br />
for(i=1;i<=n;i++)<br />
{<br />
if(array[i]==x)<br />
{<br />
cout<<”found at position ::”<<i<<endl;<br />
break;<br />
}<br />
}<br />
if(i>n)<br />
cout<<”Not found\n”;<br />
}<br />
<br />
int main()<br />
{<br />
searching obj;<br />
obj.input();<br />
obj.linearsearch();<br />
return 0;<br />
}<br />
<div>
<br /></div>
</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-75300883420548288622013-03-10T14:48:00.001-07:002016-08-30T12:39:17.805-07:00C++ Code For Binary Search<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
#include<iostream.h><br />
#include<conio.h><br />
#include<stdio.h><br />
<br />
void main()<br />
{<br />
clrscr();<br />
int l_v=1;<br />
int h_v;<br />
int a[51];<br />
int middle;<br />
int num,i=0;<br />
cout<<"Input your sorted num :<br />
";<br />
while(scanf("%d",&a[i])!=EOF)<br />
i++;<br />
h_v=i;<br />
cout<<"<br />
The input numbers are :<br />
";<br />
i=0;<br />
while(i<h_v)<br />
{<br />
cout<<a[i]<<endl;<br />
i++;<br />
}<br />
getch();<br />
cout<<"<br />
<br />
Input your searching number :<br />
";<br />
cin>>num;<br />
for(int n=0;a[middle]!=num;n++)<br />
{<br />
middle = (l_v + h_v)/2;<br />
if(a[middle]>num)<br />
h_v = middle - 1;<br />
else if(a[middle]<num)<br />
l_v = middle + 1;<br />
else if(a[middle]==num)<br />
cout<<"<br />
Found your number in "<<middle+1<<" position.";<br />
}<br />
cout<<"<br />
<br />
This program's loop is executed "<<n<<" times to find out<br />
the<br />
number.";<br />
getch();<br />
}<br />
</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-39143307528689925662013-03-09T01:35:00.001-08:002016-08-30T12:40:04.176-07:00কথিত ইসলামী দল জামাত ইসলামের মিথ্যাচার সমগ্র<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
আল্লাহর আইন, ইসলাম বুকে ধারণ করে রাজনীতি, কোরআন শরীফ, ঈমানের পথ ইত্যাদি বুলি আউরিয়ে রাজনীতি যারা করে তাদের সচেতন মিথ্যাচার দেখুন - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
শাহবাগ আন্দোলনের শুরুর মুহুর্ত থেকে ছিলাম, সাধারণত রাতে বাসায় চলে আসি, একদিন সকালে ফেসবুকে হঠাৎই এ ছবিটা দেখে আঁতকে উঠি! <strong>শাহবাগে তরুনী ধর্ষণ!</strong> সেখানে যারা-যারা ছিলো অনেককেই ব্যাক্তিগতভাবে এবং অনলাইন সম্পর্কের জেরে চিনি, ভয়ংকর এ সংবাদ শুনে খুলে দেখলাম নিচের ছবিটা - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn1/s720x720/560245_10200592587045076_1748697852_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fon.fb.me%2FW9rgIi&h=PAQG4Xtg8&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">Yasin Arafath</a> নিকের ভদ্রলোক <a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fon.fb.me%2FZr6yKe&h=wAQGFj9__&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">এ ছবি(খবর) শেয়ার দিয়েছেন</a>। এ খবরের সূত্র দেখলাম কলকাতার আনন্দবাজার পত্রিকা। টাশকি খাওয়ার মতোই ব্যাপার! দেশের এতো পত্রিকা থাকতে, এমনকি শাহবাগ আন্দোলন যাদের বিরুদ্ধে তাদের পত্রিকা যেমন, দৈনিক সংগ্রাম, নয়া দিগন্ত, আমার দেশে এ খবর না প্রকাশ করে আনন্দবাজার প্রকাশ করতে যাবে কেন? ক্লিক করলাম ভদ্রলোকের দেয়া লিঙ্কে - <a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fwww.anandabazar.com%2F7bedesh%25E0%25A6%25AC%25E0%25A6%25BE%25E0%25A6%2582%25E0%25A6%25B2%25E0%25A6%25BE%25E0%25A6%25A6%25E0%25A7%2587%25E0%25A6%25B61.html&h=QAQGoKxQY&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank"></a><a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fwww.anandabazar.com%2F7bedesh%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B61.html&h=1AQGePtE3&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">http://www.anandabazar.com/7bedeshবাংলাদেশ1.html</a></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
ভেসে উঠলো নিচের এই চিত্র -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-prn1/s720x720/71698_10200592622845971_1830431323_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
ভয়ংকর মিথ্যা কিছু কথাকে টাইপ করে ইমেজ বানিয়ে আনন্দবাজার পত্রিকার নামে ছেড়ে দেয়া হলো শাহবাগে আন্দোলনকারীদের ধর্ষক সাজিয়ে! ''ধর্মীয় রাজনীতিবিদ'' বলে কথা!</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
পরদিন অফিসে বসে দেখলাম আমার ইউনিভার্সিটির এক বড় আপু <a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fon.fb.me%2FWPEV9z&h=tAQHDjDKg&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">শেয়ার দিলো</a> নিচের ছবিটা, প্রথম আলোর বরাত দিয়ে বলা হচ্ছে সে শাহবাগ আন্দোলনে মারা গেছে - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash4/190330_10200592660086902_972754416_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
গলায় দড়ি দিয়ে মরে গেছে বলা হচ্ছে ছবির যে ছেলেটা তাকে আমার অফিসের অনেকেই চেনে। বন্ধুরা ওকে ডাকে 'দুখু সুমন' বলে। জাহাঙ্গীরনগর থিয়েটারে নাটক করে। এডিট করা উপরের ছবিটা বানানো হয়েছে নিচের ছবিটা থেকে - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-ash3/60708_10200592684407510_1493243655_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
কীসব প্রচন্ড মিথ্যার বেশাতি খুলে বসেছে ইসলামী ভাবধারী বলে কথিত সংগঠন জামাত-শিবির চক্র!</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
একই সময়ে পাবলিকের দৃষ্টি ভিন্ন দিকে নেয়ার উদ্দেশ্যে <a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fon.fb.me%2F136riI3&h=5AQEkpCJA&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">ফেসবুক</a>, <a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fbit.ly%2FXmwNi9&h=zAQFb-e3d&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">বাংলাসংবাদ টুয়েন্টিফোর</a>সহ বিভিন্ন জায়গায় ছড়ানো হলো নিচের ছবিটি - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash3/560047_10200592731648691_1191691843_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
উপরের ছবিটা আসলে বানানো হয়েছে নিচের এ ছবিটি থেকে - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-snc6/285323_10200592778729868_1242386560_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
এবার আসুন পাকিস্তান পুলিশের <a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fon.fb.me%2FVI3Lvg&h=9AQE6LWk4&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">একটা ছবি পোস্ট</a> দেখি - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash4/s720x720/225296_10200595326033549_128588463_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
এ ছবিটাকে মেরে দিয়ে বানানো হলো এ ছবি - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-snc6/285710_10200595332633714_912763133_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
শাহবাগ প্রজন্ম চত্বরের একটা ছবি দেখি - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/487950_10200595396195303_1582587620_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
এর সাথে মেশানো হল এই ছবিটির অংশবিশেষ - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn1/64557_10200595397635339_523200493_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
মিশিয়ে শাহবাগকে সেক্স-জোন বানানো হলো এ ছবিটিতে - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-ash3/554155_10200595404915521_758752460_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
শাহবাগের ছবি হিসেবে পোস্ট দেয়া হলো এ ছবিটা - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn1/66958_10200595429036124_2006383702_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
উপরের ছবিটাকে একটা ফানি ছবি হিসেবে অনেকদিন আগেই নানান জায়গায় দেখেছি! একে শাহবাগের ছবি ঘোষণা দেয়া হলো! তাইলে <a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fbit.ly%2FYyZ4Qz&h=uAQHYwuyv&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">এই পোস্টে</a> যে ২০১২ সালের আগষ্টে একই ছবি এসেছে!</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
শাহবাগ আন্দোলনের অন্যতম নেতা ইমরান এইচ সরকারের ছবি পাশে বসিয়ে <a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fon.fb.me%2FWQUAFL&h=xAQFJ7HrV&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">পোস্ট করা হলো</a> এ ছবিটি - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-prn1/65502_10200598352709214_2089326395_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
অথচ এটা একটি আপত্তিকর ভারতীয় সাইটে <a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fbit.ly%2FY8iKwy&h=aAQGSYxT-&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">DR. SHEETAL AND ANAND SEX AT MUMBAI MEDICAL COLLEGE শিরোনামে</a> ২০০৯ সালের সেপ্টেম্বরে পোস্ট হয়েছে, জামাত-শিবির এসব পর্ন সাইটে ভালোই নজর রাখে দেখা যায়, কাছাকাছি চেহারা মিলানোর জন্যে এসমস্ত ছবি বাছাই করতে প্রয়োজনীয় দীর্ঘ অভিজ্ঞতা তাদের রয়েছে। ছবি দেখুন<strong> - - -</strong></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash3/s720x720/8668_10200598368509609_1059867354_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
ক্রমাগত ঘোষণা দেয়া হচ্ছে শাহবাগের সব মানুষ নাস্তিক, এরা আল্লাহ-খোদা মানে না, ব্যাভিচার করে বেড়ায় ইত্যাদি। ইসলাম নিয়ে প্রতারক গোষ্ঠীর 'সব নাস্তিক' প্রচারের কিছু প্রমাণ পাওয়া যায় কিনা দেখি। শাহবাগের সবাই ইসলামবিদ্বেষী নাস্তিক হলে এরা কারা - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/s720x720/35510_10200595457476835_626976731_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
শাহবাগের সবাই ইসলামবিদ্বেষী নাস্তিক হলে এরা কারা - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash3/536907_10200595462756967_914535034_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
শাহবাগের সবাই ইসলামবিদ্বেষী নাস্তিক হলে এরা কারা - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-prn1/s720x720/150726_10200595464357007_151000458_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
শাহবাগের সবাই ইসলামবিদ্বেষী নাস্তিক হলে এরা কারা - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/539780_10200595466517061_2083330192_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
শাহবাগের সবাই ইসলামবিদ্বেষী নাস্তিক হলে ইনি কে - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn1/s720x720/33959_10200595479317381_272473266_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
শাহবাগ আসলে কোন রাস্তা নয়, গড়ের মাঠ, দেখুন না <a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fon.fb.me%2FW3nWDM&h=PAQG4Xtg8&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">শেয়ার দেয়া হলো</a> শাহবাগের <strong>ঘাস-মাটির মাঠে</strong> বসে কেমন নেশা করছে কতিপয় নেশারু - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash4/267833_10200595489077625_1575689779_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
এসব প্রকান্ড মিথ্যাচার কি কোন বিচ্ছিন্ন ঘটনা? কতিপয় বিপথগামী শিবির কর্মীর দুষ্টুমী? না, তারা প্রাতিষ্ঠানিকভাবেই লালন করে এহেন মিথ্যাচারী মনোভাব। এদের রাজনীতির মুল অস্ত্র মিথ্য রটানো, প্রতিপক্ষের বিরুদ্ধে কুৎসা প্রচার করা। কুৎসাকারী না হলে কোন ইসলামপ্রেমী মুসলমান <strong>কাবা শরীফ </strong>নিয়ে মিথ্যা কথা বলে? <strong>আমার দেশ</strong> পত্রিকায় ৬ ডিসেম্বর ২০১২ তে প্রকাশিত একটি রিপোর্ট দেখুন - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/66911_10200595494077750_234280515_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
একই দিনে <strong>দৈনিক সংগ্রাম</strong> পত্রিকার একটি রিপোর্ট দেখুন - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-ash3/558020_10200595497437834_532832986_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
এবার <a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fbit.ly%2F11UpHWk&h=NAQEqaob4&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">এই ছবির উৎস</a> দেখুন, ১৮ অক্টোবর ২০১২ তে প্রকাশিত কাবার গিলাফ পরানোর সময় তোলা ছবিটিকে একটি আরবি সাইট থেকে নিয়ে বাংলাদেশের রাজাকারদের বাঁচাতে মানববন্ধন নাম দেয়া হয়েছে দেশের দুইটা জাতীয় দৈনিকে - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-ash3/563272_10200595520638414_1508602928_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
এ মিথ্যাবাদী এবং প্রতারকদের একটা প্রকৃষ্ঠ প্রমাণ পেলাম আমার সহকর্মী মাহমুদ আপেলের একটি সাম্প্রতিক পোস্টে - - -</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<blockquote style="background-color: white; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 5px; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px; margin: 0px; padding: 0px 15px;">
<div style="line-height: 1.5em;">
পরিচিত এক ছোট ভাই ইদানিং ফেসবুকে বেশ সময় দিচ্ছে। সারাক্ষন ফেসবুকে বসে থাকে। অথচ গত তিন বছরে তাকে ৩ বার ফেসবুকে বসতে দেখেছি বলে মনে করতে পারছিনা। যাই হোক, কদিন ধরে ফেসবুক লগ ইন করলেই দেখছি ছোট ভাইটা শাহবাগ আন্দোলনের বিপক্ষে বেশ সোচ্চার হয়ে স্ট্যাটাস দিচ্ছে, বাঁশের কেল্লা সহ অন্যান্য শিবিরের পেজে শাহবাগ আন্দোলন নিয়ে যে প্রপাগান্ডা ছড়ানো হচ্ছে তা শেয়ার দিচ্ছে, দৈনিক সংগ্রাম পত্রিকার নিউজ শেয়ার দিচ্ছে, ব্লগার রাজীবের মৃত্যুর পক্ষে কথা বলছে। আমি বেশ অবাক হয়ে গেলাম। এই ছেলেটা কখন কিভাবে শিবিরের ফাঁদে পড়ছে কে জানে। খুব মন খারাপ লাগল, এই বাচ্চা ছেলেটাও শিবিরে যোগ দিছে!! অকে ফেসবুকে নক করেও কোন জবাব পেলামনা। সাত-পাঁচ না ভেবে তার নাম্বার যোগার করে ফোন দিলাম। বললাম আমার অফিসের দিকে এলে যেন আমার সাথে দেখা করে। তো আজ সকালে ও আমার অফিসে এসে আমাকে ফোন দিল। দেখা করে ওর সাথে কথা বললাম। চা খেয়ে ছোটভাইটাকে প্রশ্ন করলাম, কিছু মনে কোরোনা তুমি শাহবাগ আন্দোলন নিয়ে যা লিখছো তাতো ঠিক না। ছোট ভাই আমার কথা শুনে বেশ কৌতুহলী দৃষ্টিতে আমার দিকে তাকাল। আমি ভাবলাম আমি বোধহয় প্রশ্নটা ঠিকভাবে করিনি। তাই আবার প্রশ্ন করলাম, তুমি শাহবাগের এই আন্দোলন সম্পর্কে কতটুকু জানো? ছোট ভাই এবার আরো কৌতুহলী। আমি বেশ অপ্রস্তুত হয়ে যাচ্ছি সেই সাথে ছোট ভাইটাকেও অপ্রস্তুত করে দিচ্ছি বলে মনে হল। আমার একটু সন্দেহ হল, আমি অন্যভাবে প্রশ্নটা করার চেষ্টা করলাম। আচ্ছা তুমি সারাদিন ফেসবুকে বসে থাকো কেন, স্কুল থাকেনা? এবার ও যা বলল তা শুনে আমিতো হতবাক। ও বলল ও নাকি ফেসবুক ব্যবহার করেনা। সেকি কথা? আমি তখন অকে ফেসবুক লগ ইন করে ওর এ্যাকাউন্ট টা দেখালাম। ও তো পুরাই অবাক হয়ে গেল। ওর ছবি ও নাম দেয়া অথচ এই এ্যাকাউন্ট ও ব্যবহার করেনা। ছেলেটা প্রায় কান্না করবে এমন অবস্থা। আমি বুঝিয়ে-সুজিয়ে অকে বললাম আমি দেখছি কি করা যায়। তারপর অকে বাসায় পাঠিয়ে দিলাম।</div>
<div style="line-height: 1.5em;">
<br /></div>
<div style="line-height: 1.5em;">
এরপর আমার উপলব্ধি হল বাঁশের কেল্লার মত ছাগু পেজে এত লাইক আর শেয়ার কেন হয়। আসলে শিবিরের একটা চক্রই আছে যারা এরকম ফেক আইডি খুলে লাইক আর শেয়ার দিতে থাকে মানুষকে বিভ্রান্ত করার জন্য। আর এই বেশি বেশি লাইক কমেন্ট/শেয়ার দেখে সেখানে যোগ দেয় আরো কিছু ধর্মপ্রাণ মুসলমান। কিন্তু সবাই তো বোঝেনা যে শিবিরের ফেক এ্যাকাউন্ট সংখ্যা বাংলাদেশের জনসংখ্যার চেয়েও বেশি। সবাইকে এ ব্যাপারে সতর্ক থাকার জন্য অনুরোধ করছি।</div>
</blockquote>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
অর্থ্যাৎ এ মিথ্যাযজ্ঞ এবং প্রতারণাযজ্ঞ পরিকল্পিতভাবে দীর্ঘদিন ধরে এরা দলীয়ভাবেই করছে। নিজের <a href="http://www.facebook.com/l.php?u=http%3A%2F%2Fon.fb.me%2FVIeAxt&h=bAQG8qntP&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">ফেসবুক অভিজ্ঞতা</a>থেকে মনে করে দেখুন, নিম্নরূপ ফ্রেন্ড-রিকোয়েস্ট কে না পেয়েছেন?</div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<span class="photo " style="padding: 0px;"><img alt="" class="photo_img img" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-snc6/s720x720/182659_10200595561079425_1821316710_n.jpg" style="border: 0px; margin: 0px; max-width: 620px; padding: 0px;" /></span></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 19.488636016845703px;">
জামাত-শিবির কোন আদর্শবান রাজনৈতিক দল নয়, প্রতারক এবং মিথ্যাচারী চক্র, এদের ত্যাগ করুন।</div>
</div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-7501408880628008252013-03-09T01:31:00.001-08:002016-08-30T12:40:04.187-07:00Shahbag Protest<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px;">17 days of Shahbag but not a single incidence of violence by the protesters & just watch what these so called Islamist parties have done today in just few hours...Guess how violent they were in 71 !!_Solaiman Shukhon</span></div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-63604461039424549702013-03-09T01:27:00.002-08:002016-08-30T12:40:04.183-07:00বিচার<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px;">বিচার আল্লাহর কাছে তিনি কিভাবে সহ্য করছেন ইসলাম ধর্মের নামে এই প্রতারনা!!!!!!</span></div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0tag:blogger.com,1999:blog-2922136593025928727.post-38657639372007383122013-03-02T15:55:00.002-08:002016-08-30T12:44:39.808-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px;">দুপুরে একটা চাইনিজ রেস্টুরেন্টে খেতে বসেছিলাম কাঁটাবনে । তখন সারাদেশ এ চলছে জামাতিদের তাণ্ডব কিছুক্ষন পর আবিষ্কার করলাম আমার পাশে যারা খেতে বসেছে তারাও জামাতি ।</span><br />
<span style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px;">রেস্টুরেন্ট এর টিভি দেখছে, যখন দেখাচ্ছে যে জামাতিরা শহিদ মিনার ভাঙছে,যুদ্ধাপরাধীর বিচার এর দাবির ব্যানার পোড়াচ্ছে্ সংবাদ কর্মীদের মারধর করছে তারা হো হো করে হাসছে আর শব্দ করছে "আল্লাহু আকবর আল্লাহু আকবর "</span><br />
<span style="background-color: white; color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px;">আর যখন পুলিশ কাউকে মারছে, রাইফেল এ</span><span class="text_exposed_show" style="background-color: white; color: #333333; display: inline; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px;">র বাট দিয়ে পেটাচ্ছে তারা আহাঃ আহাঃ করে উঠছে<br />আর নানা রকম গালিগালাযে এ দেশের মানুষ এর গুষ্ঠি উদ্ধার করছে ।<br />একজন বললো "দেশ এখন দুইটা দল এ বিভক্ত হয়ে গেছে এক ইসলামের পক্ষে আর এক ইসলামের বিপক্ষে" আর একজন বলল " মসজিদে কত বৃদ্ধ মানুষ যায় নামাজ পড়তে, কত বাচ্চা কত সাধারণ মানুষ যায় নামাজ পড়তে আর পুলিশ কত বড় জানোয়ার যে সেই মসজিদে হামলা করে ।<br />আমি এতক্ষন চুপ করে ছিলাম কিন্তু রাগে আমার সারা শরীর কাঁপছিল এদের এই বীভৎস হাসি দেখে । সব শেষে গলা উঁচু করে একটা কথা বলেছিলাম যে " আপনারা জানেন যে, মসজিদে জামাতিরা ছাড়াও সাধারণ মানুষ , শিশু, বৃদ্ধরাও নামাজ পড়তে যায় তাহলে আপনারা আপনাদের সব রকম সভা সমাবেশ মসজিদ কেন্দ্রিক করেন কেন ?"<br />পরবর্তী সময়ে আর একটি কথাও তারা বলেনি ।.........<br /><br />বলবে কি করে এরা হল এদেশের সব থেকে বড় দালাল, সব থেকে বড় প্রতারক , এরা ইসলামকে পুজি করে সাধারণ মানুষকে তাদের দলে ভেড়াতে চায় । নিজেদের বীভৎস চেহারা ঢেকে রাখে ইসলামের ছায়াতলে । যে মানুষ কখনো জানে না যে ব্লগ কি জিনিস সেও আজকে নারায়ে তাকবির বলে এদের সাথে জিহাদ করতে নামলো । জিহাদ করতে নামার কারন টাও একবার জানতে চাইলো না , যাচাই করলো না তার সত্য মিথ্যা । কারন ওরা ইসলামের কথা বলেছে ।</span></div>
Imtiaz Ahmedhttp://www.blogger.com/profile/00485087332258857294noreply@blogger.com0