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.

Learning LaTex

LaTex, I had never heard about this term before doing this project, but when I came to know about it’s features and found it excellent.LaTex is a document markup language and document preparation system for the TEX typesetting program. Within
the typesetting system, its name is styled as LaTex.

Within the typesetting system, its name is styled as L A TEX. The term L A TEX refers only to the language in which documents are written, not to the editor used to write those documents. In order to create a document inLaTex, a .tex file must be created
using some form of text editor. While most text editors can be used to create a LaTex document, a number of editors have been created specifically for working with LaTex.
LaTex is most widely used by mathematicians, scientists, engineers, philosophers, linguists, economists and other scholars in academia. As a primary or intermediate format, e.g., translating DocBook and other XML-based formats to PDF, LaTex
is used because of the high quality of typesetting achievable by TEX. The typesetting system offers programmable desktop publishing features and extensive facilities for automating most aspects of typesetting and desktop publishing, including
numbering and cross-referencing, tables and figures, page layout and bibliographies.

LaTex is intended to provide a high-level language that accesses the power of TEX. LaTex essentially comprises a collection of TEX macros and a program to process LaTex documents. Because the TEX formatting commands are very low-level, it is
usually much simpler for end-users to use LaTex.

Learning Meteor

Meteor is a JavaScript web development framework. Which does most of it’s work using the most used language of the web i.e. JavaScript so if you are an experienced JS developer you will have no difficulty in grabing most of it’s concepts. I have created a sample app for the web using this framework. This app is used to manage your tasks and can be easily setup using.
The apps developed in meteor can be easily converted into an android or ios app increasing the user base. Due to this reason this framework is very popular among the developers. That is why it is the top ten most starred repository on the web.
The language at the backend of the meteor is also JS. So many times the code for both things turns out to be similar. So you don’t have to write things again and again. File structure is self describable with self explanatory meanings and can be easily understood.Database used is NOSql : MongoDB making it favourable for data analysts to try thier hand on the data provided to them according to the user’s action on the website and create a better user experience and in the end increasing the revenue generated by companies.
Meteor also provide free hosting to the small apps with some special domain for it’s users. You just have to sign up on their official website and they will provide it for you. The setup for the production is almost similar to the testing. You can launch your app on the production and check for it’s performance and later buying your own domain, if it works fine.
Meteor is built on the top of Node.js. So, you have to install node before using this extensively used framework. After three easy commands you will be able to run the sample program already created for you by the meteor team.

Learning Bootstrap

BootStrap is javascript framework which is used to develop responsive websites. BootStrap is also known as twitter bootstrap is developed by the developers at Twitter. This library is extensively used by the web developers and designers to create almost
irresistable content that looks good on all screen sizes.
Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only. Bootstrap is the second most-starred project on GitHub, with more than 100,000 stars and 45,000 forks.
The Bootstrap adopted the famous grid system and continue to work with it since the 2.0 release. Starting with version 3.0,Bootstrap adopted a mobile-first design philosophy, emphasizing responsive design by default. With the great documentation
and large fan base you can easily find tutorials on this topic making it easier to start writing your bootstrap enabled. And the best part is that you only have to know simple html to get started.