How to show html on the browser

Sometimes we want to share html code on the browser for example today I wanted to give a presentation. This presentation was made with the help of reveal.js. Now reveal.js uses html to make presentations. There was some html code that I wanted to show on the browser. I searched on the web and found pre and code tag along with blockquote to show html on browser but it wasn’t working as it was taking some of the html tags in the code and executing them.

So I went forward to find the solution for this after some more searching I found another situation which worked great form me.

So today I am going to share this here. Whenever you have to write <, which is also opening tag for HTML write &lt; instead and whenever you have to write >, use &gt;

For example if you have to write <head>, you can write

&lt;head&gt;

Still confused. Post a comment and I would be delighted to help. Thanks.

Meteor.js : Working with routes

As we all know that meteor can only be used to create a single page web apps. Still there are many instances when one want to work with different URL’s on a web applications.

This problem in Meteor is solved by using routes. Whenever a user does some event(mostly tries to click on a link) on the website then we can create a route to different templates and open them on the client side creating a great user experience.

Now there are a lot packages available in the meteor for handling these routes. The two of them which are most famous are :

  • Iron router
  • Flow router

Both of them are great but I am going to use Flow router for my further learning process.

Flow router is created by a team at kadira: flow router. We can add this router to our application by using this command while we are in the meteor app root directory.

$ meteor add kadira:flow-router

Now run your app using the basic meteor command to run the app

$ meteor

This will run the app on localhost:3000. Now in the browser you can go to different routes to check this small example about the routes.

As the routes are very basic to client we can put them in the client folder present in the application but it is recommended that we must put them in the /lib folder inside the root folder. So first of all create a folder named lib when inside root folder of the app.

Now create a document with the name of routes.js. We are going to put all our routes in there. Here I am going to discuss the very basic example so that we can see whats happening. We can further extend our work from there on.

In the file write this content.


FlowRouter.route( '/home', {
  action: function() {
    console.log( "Welcome to the homepage" );
  },
  name: 'Home'
});

This type of route is known as static route which is used to create route for a static address. For example if we want to create a page for home we can create by using this type of route. Now go to http://localhost:3000/home and opening the browser console we can see the comment : “welcome to the homepage” (without quotes).

There is more to routers which I will talk in the upcoming post.

If something not correct in the post please comment below. If still confused feel free to contact using the comments.

BakaPlan : Baithne ka plan (Generate Seating Plan)

Hello everyone,

Sir said this before giving the task to me.

Reading other’s code is very important task that every CS engineer must know. And BaKaPlan is the software that is written by following all the coding standards. You must always follow these standards.

In this post I am going to discuss about the BaKaPlan. This task was assigned to me by sir. He wanted me to read about this software and make it work on my system. He also wanted me to read about the code and make a list in the way it works.

In this post I will write the point on which I have reached in the process.

The specific and the tasks which I have completed during the process that I really want to discuss are :-

  • Running CGI on the localhost server.
  • Running CGI in the public_html folder.
  • Configuring exim4 mail server

During this problem I faced a lot of problems and learned a lot of things. I solved these problems by the help of seniors and other trainees in the group. Some of which I would like to discuss here :-

  • what to do when your GUI doesn’t work.
  • The things that didn’t worked for me while

So, let’s start with the BaKaPlan….

This is the software that can be used to make the seating plans for an examination. This software also provides some of the other options that we can work with to come up with a better solutions for all the seating problem. We will talk more about the things that it provide but first of all we will discuss the things that are required to make this software work on our system(your system : If you are doing it with this post).

Requirement #1 : Apache server

Most of the people may already have this thing in the local system but if you haven’t got it use this command:

sudo apt-get install apache2

Requirement #2 : GNU G++ compiler

sudo apt-get install g++

Requirement #2 : CGICC library

sudo apt-get install libcgicc-dev

It’s time to create a branch of this post. This branch will tell help you to make your CGI work at the default directory in the system. For Ubuntu this place is /usr/lib/cgi-bin/

Read the post by clicking here.

Now it’s time to make it work on the place where it is required for this software i.e. In the home inside the public_html folder.

To know more about this process read this post.

The next process is pretty straight forward and can be done by following this link.

https://github.com/GreatDevelopers/bakaplan/

After this we have go to the installation procedure. The installation process is done by cloning the bakaplan repository and configuring the database. For this you can go to the link below.

https://github.com/GreatDevelopers/bakaplan/blob/master/INSTALLATION.txt

Now on going to the link the bakaplan page shows up but I am unable to log In. Every time I tried to log In to the system using the data given in the files it says that you need to login to the website and when I register to the website it says check your e-mail. When I check the e-mail it doesn’t show anything about the bakaplan. I have checked everywhere, even in the spam folder.

I put the mail regarding this issue into the mailing list but no reply has came so far.

There were some other things tried by me before putting the question in the mailing list. For that I will come up with next post. So, read the next post in this category.

If you have any doubt in this section please comment below.

Creating a design with media queries

Media queries are used to tell the browser about the various breaking points in the website so that we can give a different css styling for all those breaking points. This type of CSS is used to make the website responsive. Breaking points are the widths at which the design breaks or is damaged.

This is the working link of the website. Go and visit this website. Although the colors used in the website are not that great but they are sufficient to explain the features. Bootstrap is not added but still the code is written in the format that if anytime in the future we need anything like this we need not to change anything. Everything will be working on it’s own.(By making only some changes)

http://singh1114.github.io/websitedesigns/occupation-design/occ.html

There is one more design that was created a long time ago using the same procedure. A lot of time was spent on this one so as far from my side their is no bad in this one.

http://singh1114.github.io/websitedesigns/design1/websitedesign1.html

Media queries Syntax:

@media only screen and (max-width:700px){

}

To find more check the CSS code for this page at:

http://singh1114.github.io/websitedesigns/occupation-design/occ.css

There is one more thing that I want to share that Bootstrap provide us easier way for solving the responsiveness problem. So It will be better option to spent some time in learning bootstrap. Still If you want to know the real procedure then this topic is worth exploring.

Also I want to discuss one of the format used in this code for specifying height i.e. vh.

vh stands for View-port Height and it gives the height of the browser that you use. Therefore 100vh is the full height and it is decreased from that value.

Also there is vw which is View-port Width.

Still confused, drop a comment and I will be very happy to solve your problem.

Merge Sort Program using JavaScript

So I was trying to create a Merge sort program using JS. Before trying to make the program we first have to understand what is the concept of merge Sort. To get a good example I went to wikipedia where I found very interesting GIF which explained the the basics of Merge sort.

In Merge sort you first have to divide the whole list into two halves and keep doing it till the number of values in the each divided list is one. As we know that if there is only one element in the list then we can take it as already sorted. Now we are going to recombine them one by one in the similar sense in which we have divided it. While recombining them we will make sure that the element added are sorted.

So the program that I created went to some errors and I am still looking into them. Whenever it is complete I will edit this post.

CGI : Make it work for public_html directory

Hello everyone,

In this post we will discuss the way in which we will tell the server that we will place our output files in a directory inside the home folder and that output files must run on the particular link.

So, let’s start the process. First of all we need a directory named public_html within which there should be a folder named cgi-bin in the home directory. The command for this process is,

mkdir -p ~/public_html/cgi-bin/

-p flag is used to create the directory no matter what and ~ sign represents the home directory.

Now as the folders are created we need to put some dummy file inside them and check out the results in the browser to make sure that everything is working properly. Go to the file.

$ cd ~/public_html/cgi-bin/

$ vim test.cpp

Now add this content to the file. Read this post if you want to know more about vim.

#include <iostream>
using namespace std;

int main ()
{

cout << “Content-type:text/html\r\n\r\n”;
cout << “<html>\n”;
cout << “<head>\n”;
cout << “<title>Lello World – First CGI Program</title>\n”;
cout << “</head>\n”;
cout << “<body>\n”;
cout << “<h2>Lello World! This is my first CGI program</h2>\n”;
cout << “</body>\n”;
cout << “</html>\n”;

return 0;
}

Save this file with the name test.cpp or with any other .cpp extension.

Now if you are following the BaKaPlan tutorial, you will be having G++ installed in your system but before compiling this file we need to complete some steps that are important to configure this public_html folder.

$ sudo a2enmod userdir

Which mean apache2 enable mod. If you want to look more into this matter you can open the manual by using this command.

$ man a2enmod

When a2enmod command is used two new files are added in the list in the directory modes-enabled. The opposite command is a2dismod which means apache2 disable mode. when using terminal type these commands.

$ cd /etc/apache2/mods-enabled

$ ls

You will see two files added to list at the end named userdir.conf and userdir.load. These files helps in the cofiguration of the public_html folder. Now you must restart apache2 by using this command.

$ sudo service apache2 restart

Now you need to give permissions to the public_html folder. Use this command to give read permissions to others.

$ chmod -R 755 ~/public_html
$ sudo a2enmod cgi

$ sudo a2enmod cgid

$ sudo service apache2 restart

$ cd ~/public_html/cgi-bin/

$ cd /etc/apache2
$ sudo service apache2 restart
$ sudo apt-get install libcgicc-dev
$ sudo vim httpd.conf

Add this content to this file.

ScriptAlias /cgi-bin/ /home/*/public_html/cgi-bin/
<Directory “/home/*/public_html/cgi-bin”>
AllowOverride None
Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
SetHandler cgi-script
Order allow,deny
Allow from all
</Directory>

Now restart apache again

$ sudo service apache2 restart

Now it’s time to compile the program. If you don’t give any output name than compiled data will be saved in a file named a.out but you can give a name using -o flag.

$ g++ test.cpp -o test.cgi

test.cgi is the name of output file.

Now in the browser type this link by replacing username with your username.

http://localhost/~USERNAME/cgi-bin/a.out

If the output file shows itself on the browser then it’s working. If not then you might have done something wrong. Follow the procedure again and solve the problem.

Still facing problem please comment below.

 

CGI : Make it work in the default directory

Hello everyone,

If we want to make CGI work, we first must know that why is it used.

To know about the prerequisites read this post. 

CGI stands for Common Gateway Interface. CGI help you to compiled program output through the browser window. If we don’t have any tool to show the output of the program on the browser then output file(obj file in the case of C program) will be downloaded. Also CGI is not only used in the case of C or C++ but it can be for many other languages.

Also before going further into the topic I want to discuss some more about how the apache2 server works. This server recognizes a directory as its default working directory and shows out any html page in this directory which have read permissions to others. As when working with the browser we are working as others. This command can be used to open up the folder that folder of the server. Just add a file

cd /var/www/apache2/html/

Now if we want to show the output of the file on the browser through localhost then we must put the output file here or we must tell that the files in the next other directory must be treated as such to show the result in the browser.

So the procedure for this is explained on two of my friend’s blogs. Please check these both procedures as both of them show different ways in which CGI can be configured in the default directory.

https://amisha2016.wordpress.com/2016/02/18/task-2/

https://iamjagjeetubhi.wordpress.com/2016/06/03/cgi-in-c/

There might be some mistakes in both of the posts. If you find any, then you must comment it in the there respected blogs.

Still need help please comment below.

Vim : The best text Editor

Before talking about the training I want to tell about the various things that I am using while writing about them.

  • Ubuntu 15.10 on my system

Day 1

This is the day one at the training institute and Inder sir introduced Vim to us. He told us about the various modes of this text editor.

I installed this on my system by using the command.

sudo apt-get install vim

He told us about the various commands in the Vim. I liked the thinking of not moving your hand off the keyboard so I explored more about this. I used one of the great website of tech world called linux.com for the reference purpose.

So lets start with the things that I have learned about Vim.

Why would you even try to move your time toward learning a full flagged text-editor. Vim is world’s best text editor for a reason whenever you work with Vim you never have to move your hand off the keyboard. You don’t need to go to mouse again and again and waste your time in the purpose. Your total typing speed will increase in the long run. Although their may be dip in the speed when you are trying it for the learning purpose but if you choose to start then this will the best decision that you might have made in a long time.

Modes

Many people in the tech may contradict this but in this post we will be talking about three modes in the vim. These three modes are

  • Command Mode
  • Insert Mode
  • Last-Line Mode

We can check for the version of Vim by launching the command

vim -v

Press :q to quit this mode.

Whenever we open a file by placing a command

vim filename

where filename is the preffered name of your file, this command first checks for the  existence of the file. If the file exist then it opens it and if their is no file by this name then it create it and opens a blank file for us with ~ sign on the beginning of each line. This sign represents the empty line in the document. Now on giving this command the editor opens in the terminal only. The first mode in which the file opens is the command mode this mode is used is used move in the document i.e. you can press j to move the cursor one line down.(we will discuss more about the commands later.

We can switch to the to insert mode by using i key. Press i key to open this mode. You can change anything in the document when you are in this mode.

The other mode is Last-Line mode which used for other purposes like saving the file.

This is the basic overview of Vim. Please refer to other posts in the category