Simple Star Pattern With One Loop With PHP


Simple Star Pattern With One Loop With PHP


Today we will create a simple star pattern with simple one loop in PHP it is very simple, below is the output you can see.
star pattern PHP


We will use a for loop and an inbuilt string function of PHP.  str_repeat(); Inside the For loop. So let's do this.

First You will need Xamppfor this task If You have already installed then well and good but if you don't know about that then also well and good. Let me explain to you what is Xampp.


It stands for Cross-Platform (X), Apache (A), MariaDB (M), PHP (P) and Perl (P). ...is also cross-platform, which means it works equally well on Linux, Mac, and Windows.

Basically, it is a package which has PHP, Mysql and some other useful software preinstalled So that You don't have to make your hands dirty downloading these tools separately.

 If you are developing any web application on LAMP stack then there might be some situations where you have come across a topic like XAMPP for testing your web app.

If you need a more formal explanation then visit here.

Installing it is not much complicated you can simply download it from here Just hit next button until installation starts. (Note: You can select Your custom installation destination to some other local disk but the default is Local disk: C)


  1. Inside Your local disk C: locate and open xampp folder. 
    xampp1
  2. Inside the xampp folder locate and open htdocs folder.
    xampp2
  3. Now create a new folder inside htdocs and name it anything in my case I will name it as projects.
    xampp3
  4. Now inside projects create 2 new file a.php and star.css (NOTE: You can name them anything you want to but the extension should be same ie; .php and .css)
    xampp4
We are done with the setup now past the below code inside your newly created PHP file in my case a.php



<!DOCTYPE html>
<html>
<head>
 <title>star pattern</title>
 <link rel="stylesheet" href="star.css">
</head>
<body>
 <div class="cont">
  <?php 
   for($i=0;$i<9;$i++){
    echo str_repeat("*", $i);
    echo "<br>";
   }
   ?>
</div>
</body>
</html>

Now inside your CSS file in my case star.css paste the below code.


.cont{
 font-size: 28px;
 margin-left: 100px;
 padding:30px;
 color:black;

}

NOTE: It is very important to understand that that CSS file is not mandatory you can to it without the CSS file, I used it because I want to use it. If you don't want to create a CSS file, fine leave it.

HOW TO RUN THE PROJECT

Now start menu and type xampp and select open xampp Control Panel from the list.
start xampp

 A new window will open like this. Press start on both Apache and MySQL

xampp controllpanel

Now open Your favorite browser I will use firefox and type: 

localhost/projects/a.php

Inside the URL box at the top of the browser.
"projects" is the newly created folder inside which we have stored a.php file. We have to provide the full path after the localhost keyword.

It is the end of this tutorial. If You have any dought Pls don't hesitate to comment below. I will be glad to help you and please show some appreciation for my work by commenting on them if you like it. Thanks.

Create A Registration Form In HTML Only


Create A Registration Form In HTML Only

Today we will create a registration form in HTML without using any CSS or any other stuff, it's super simple and quick to create. We will use tables to format the registration form.

So let's start this simple web development tutorial. You can use this in your blog or for any other website or for practice.

No coloring, styling stuff will be in this tutorial we will cover that in the coming tutorials.

I will use Sublime Text 3 a free version for this tutorial. You can use other editors also notepad will also work. But the reason for not using notepad is that you can do the same stuff in less time in the modern text editors.


We will need to create another HTML page to redirect the form when submit button is clicked. so open another file and save it in the desktop or the same location where you save the form.html file in the same folder. NOTE: Inside the HREF attribute enter the exact path of the file. for example, if you have saved both the file in desktop then just enter redir.html as location else if you have saved both the file in different location like in local disk D and inside any folder in that drive then give the full path like D:your_folder_name\redir.html

This is how our form will look like. I know it is a very simple looking site but sooner or later we will work to create a more beautiful registration form. Below is the code you will use to create this simple looking basic HTML form which will do nothing but take user input and redirect to another page.


<!DOCTYPE html>
<html>
<head>
 <title>regestration form</title>
</head>
<body>
<form action="abc.html">
 <table border="1" align="center">
 <tr>
  <th colspan="2">REGISTRATION FORM</th>
 </tr>
 <tr>
  <td>Name</td>
  <td><input type="text" placeholder="Your name" required></td>
 </tr>
 <tr>
  <td>Address</td>
  <td><textarea cols="50" rows="10" placeholder="Your address"></textarea></td>
 </tr>
 <tr>
  <td>Genger</td>
  <td>
   Male:<input type="radio" name="gen" value="male">
   Female:<input type="radio" name="gen" value="female"> 
  </td>
  
 </tr>
 <tr>
  <td>Skills</td>
  <td>
   C:<input type="checkbox">
   C++:<input type="checkbox">
   JAVA:<input type="checkbox">
   JAVASCRIPT:<input type="checkbox">

  </td>
 </tr>
 <tr>
  <td>City</td>
  <td>
   <select>
    <option value="">select</option> 
    <option value="kolkata">Kolkata</option> 
    <option value="mumbai">Mumbai</option> 
    <option value="delhi">Delhi</option> 
    <option value="pune">Pune</option> 
   </select>
  </td>
 </tr>
 <tr>
  <td align="center" colspan="2">
   <input type="checkbox">I accept terms and contitions. <br>
   <button>Submit</button>
  </td>
 </tr>
 </table>
</form>
</body>
</html>

Create Festival Wishing Website On MEAN Stack


Create Festival Wishing Website On MEAN Stack

FESTIVAL WISHING APP ON MEAN STACK

Today we will create a Wishing Website On MEAN Stack. There will be one webpage which takes a username in a textbox and show the wishing message with the username on the top of the page. You can actually call this a festival wishing webpage or and user welcome page using a query string.
If you have heard about query string for the first time then, It is a text which is passed as a URL on the top and fetched but some element of the page.
here is an example of Query string:-


Required software for this project


  1. Text Editor (of your choice I will use Sublime Text 3)
  2. NodeJs
  3. GIT

 NPM packages to be used.

  • EJS(Embedded JavaScript)
  • Express
  • Nodemon (Optional)



I will not show you how to install these now. I will write another post real soon on this topic and update this one.

Steps

1. Create a file on the desktop name it anything you want.

2. Right-click on the folder and select the open git bash here command. (make sure you have installed GIT on your system before this step else you can`t follow this part.)

3. Type npm init and create a JSON File.
  • give package name app.js
  • if you want to change version you can 
  • Rest, hit enter no need to change anything.
4. Now inside your folder create a file and name it app.js
and paste this code I will explain later

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var express = require("express"),
 app     = express();

app.set("view engine", "ejs");
app.use(express.static(__dirname + '/public'));


app.get("/", function(req,res){ 
 res.render("welcome",{qs: req.query});
});


//server set up
var server =app.listen(3000,function(){
 console.log("on server!");
})


5. In your git bash command line, you have to install those packages mentioned above.
Type these, one by one.
  • npm install express --save
  • npm install ejs --save
  • npm install nodemon 
6. Now create two more folders inside your main folder.
Name them like public, views respectively. and don't name it something else name them as given here it is essential of the project.

7. Inside of the views folder, we will create a new EJS file name it anything with .ejs extension at the end.

8.  Inside of the public folder, we will create a new CSS file name it anything with .css extension at the end.

9. open the CSS file in the text editor and add this code


html,body{

 padding: 0;

 margin: 0;

 

}



.container{

 background-color: #F5F5F5;

 max-width: 500px;

 height: 100%;

 width: 100%;

 margin: 0 auto;

 text-align: center;

 border-radius: 18px;

 box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);

}



.swing{

 animation: swing ease-in-out 1s infinite alternate;

 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

}

@keyframes swing{

 0%{transform: rotate(5deg);}

 100%{transform: rotate(-5deg);}

}



img{

 max-width: 60%;

 max-height: 30%;

}



#nameOverflow{

 text-transform: uppercase;

 overflow-wrap: break-word;

}



.bounce {

 margin-left: auto;

 margin-right: auto;

 color: white;

 font-size: 35px;

 text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

 animation: bounce 2s infinite ;

}



@keyframes bounce {

 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}

 40% {transform: translateY(-30px);}

 60% {transform: translateY(-15px);}

}

10. Now open the EJS file and enter this code


<!DOCTYPE html>

<html>

<head>

 <title>query string</title>

 <link rel="stylesheet" type="text/css" href="welcome.css">

</head>

<body>

 <div class="container"> 

 <br>

 <% if (qs.name ) { -%>

 <h1 id="nameOverflow"><%=qs.name%></h1>

 

 <% } else { -%>

 <h1 id="nameOverflow">Your Name</h1>

 <% } -%> 

 

 <h2>की ताराफ से</h2>

 <h2>

 YOU WISHING TEXT

 </h2>

 <img class="swing" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Shiva_cropped.jpg"> 

 <% if (qs.name ) { -%>

 <h2  class= "bounce" id="nameOverflow"><%=qs.name%></h2>

 

 <% } else { -%>

 <h2 class= "bounce" id="nameOverflow">Your Name</h2>

 <% } -%>

 <form action="/" method="GET">

 <input type="text" name="name" placeholder="ENTER YOUR NAME">

 <button>submit</button> 

 </form>

 

 <br>

 <h2>

 YOUR WISHING TEXT

 </h2>

 <br>

 <h1>creator:- Atanu Modal</h1> 

 </div>



 

</body>

</html>

I have used an image from Wikipedia you can change as per your requirement and add it to your code. You can change the creator name and the wishing text to anything. rest should be the same.
We are done, we have created the CSS for style and the HTML file using EJS.
now we have to test it.

11. In your git bash command line type node app.js or nodemon app.js (If you have installed nodemon as a package) else use the above, both will work fine.

12. Open a Web Browser, I will use firefox. Type localhost:3000 on the address bar BOOM!! it works. Enter your name in the text field and hit submit button, it works!

Here is the link of complete sample project hosted on Heroku.
https://serene-hollows-45031.herokuapp.com

If you want to host your app for free like I did use Heroku to host it. Below is a link to a guide provided by Heroku you should check, it`s super easy to follow.
 https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up




Top Must Learn Web Development Languages


Top Must Learn Web Development Languages

web development

Web Development is a huge field with tons of language to discover and lots to learn but the basic concept is same for all the language like loop array objects class, more... 

These are some of the building blocks of not merely web development but all the field in computer Science it may be machine learning, software development of a simple c language program for a simple task. All You have to do is master only one language and leave the rest to your brain. 


It will become simple to understand other programming languages once you have the foundation. 

Now I am not here to teach you programming but I will mention some of the top web development languages to focus more and get hired as soon as possible.


It is right to say web development is a dynamic field and things change in a very small period of time. You will see people are moving from one language to other. 

And it is necessary, some languages can make the work more easily than the other it will be right to say some language might take less line of code to do the same job in another language. 
It will be better for you if you learn as much as possible. Invest in Yourself.

it is also correct that you cannot master everything(every programming language). So, I have created a list of language you should take a look and proceed further.

1.NodeJs (Javascript)

nodejs

It is one of the demanding languages of 2018 and will continue to run in the market for coming years.
Node is at the top priority because it let you write serverside code in javascript. 

Every web developer in the world is familiar with Javascript hence it reduces the requirement to know some other languages to do the same task in an efficient way. 

And according to the demand nodeJs developer will be in demand in the coming future in India. Nodejs developers are in a huge demand in other countries.

2.PHP

php

One of the oldest web development languages mostly half of the internet websites are created with PHP. 

No dought market demand is extremely high in India and other countries too. If you have developed a portfolio of websites developed with PHP you will easily get a job.

It is quite easy to learn. A large number of tutorials on youtube are available even they will teach you how to code in PHP. 

Most of the newcomers in this field try to get their hands dirty with PHP.  So no dought PHP should come on the second rank. 

3.DotNet

dotnet

Microsofts very own and supported language DotNet. Companies are looking for DotNet developers.

But most of the developers prefer PHP for development so there the demand for DotNet developers is increasing. 

Companies which are still developing on these technologies are looking for a professional developer. What I can say is Dot Net developers are in high demand in India. 


If you go and search for a web developer job you will find 5 out of 10 postings are DotNet as a required skill. I won`t hesitate to learn this language. And it is opensource too. 

4.Python

python

Python is not a new programming language even it is older than JavaScript. You will not regret learning this language at all. 

You can use it in other things like creating a game, Machine Learning, and Web Development too. Python actually pays off. 

You can create chatbots with it are some Artificial intelligence stuff with it but you can do it with JavaScript too. 

Python is easy to learn simple syntax and fun. Job demand is gradually increasing day by day.  


Where to learn the above language.

Yes, this would be my first question after checking the list. The answer is simple, Udemy for self-online learning or you can join any institute. 

They will give you the practical training you need. Some institute gives you placement opportunity too, please check that before joining any institute.

Hope you like it please comment below and share.


Web Development Tools To Increase Development Speed Like PRO


Web Development Tools To Increase Development Speed Like PRO

Web development is a very dynamic field new trends come and go and you have to keep up with them else you will be left behind. I agree with your point that creating a website from scratch is not an easy task you have to keep in mind many things like best design principles, code refactorization, and other stuff like that. From browser addon to text editor packages I have coved all the essential tools to sky-rocket your web development process like never before and I am constantly updating the list. So, Let's dive right in.

Development Tools

1. Sublime Text 3

sublime

One of the best and most use text editor for frontend development purpose. It is a fast and user-friendly editor, written in Python. You will get a default HTML boilerplate in it no need to install an additional package for that. Additionally, you don't have to necessarily use emmet package on sublime text editor but I recommend to install it why I am saying that because you get most of the features preinstalled in the text editor. In my opinion, it is the best editor if you are a front-end developer. Moreover, you can edit more that one line at the same time. AMAZING!!

2. Visual Studio Code

vsc

One of the intelligent text editors out there, If you are working on the backend this text editor can be a boon for you to reduce time not typing the same line of code again and again. It will help you to auto-complete your code line with more accuracy than another text editor can do, there is less editor which will generate a drop-down popup with more accurate code suggestion, You can use C9 as an alternative but its paid. you have to purchase a premium plan. and here you are getting it for free. moreover, they are providing pre-installed git with the editor.It is extensible and customizable too.

3. CodePen

codepen

One of my favorite editor to test quick project and test functionality of elements in my website, like the grid system, button, links what not. The main reason for its popularity is that it is fast you don't have to open your browser every time and refresh the page to see the change. It does that instantly for you. You can share your work on the go and show off or help the community may be. If you think CodePen is the only one for this job then let me tell you there are more website like that JSFiddle, CSSDeck, JSBin, LiveWeave.

HTML Resources


1.HTML5 Reference by MDN

mdn

I don't have much to say about it. One of the biggest and the oldest HTML Reference by Mozilla. You can search any topic of your need copy it and past it and tweak it as per your requirement. As simple as that.

CSS Tools

1.ColorZilla Addon

dropper

CollorZilla addon is a must-have tool for your browser. Sometimes I like a color from a website or from an image I found online like google images. what I use is this CollorZilla color picker tool to copy the hex value of the color and use it in my projects. Very helpful to me.

2.Clippy

clippy

This is a tool help you create various type of shapes with the clip-path property of CSS. on this website you will have a huge range of shapes to chose from and select your desired one and copy the auto-generated code and use it in your project, You can also tweak the predesigned shape as per your need and change the background color also the size too.

3.UI Gradients

uigradient

This one is my favorite I often use gradient colors in my projects to create one from scratch it will waste a lot of my time. So this tool helps me the most at that point in time I simply go to their website and select some random color combination and copy the code and BOOM all done. You get the web prefixes with the code too.

4.Color Hunt

colorhunt

If you are not a designer kind of a guy or you are very confused about which color to use in the theme. This could be a heaven for you. You will get a lot of predesigned color combination which you can use them. Just use the color picker tool I suggested above and use it on them and create the custom color pallet of your choice.


Optimization And Testing

1. Optimizilla

optimizilla

If you want to make your blog or website faster and reduce the load time on mobile and desktop. you have to reduce the image size by compressing the image. But it is a risk to compress the image if you reduce the quality of the image, But with optimizing, you will not suffer from that. You can compress an image up to 20mb.



दुनिया के अजब-गजब रहस्य


दुनिया के रहस्य देश-दुनिया के कई सारे रहस्य हैं जो हम आपको आगे बताने जा रहे हैं।
 
देश-दुनिया के कई सारे रहस्य हैं जो हम आपको आगे बताने जा रहे हैं।
आइसलैंड सबसे खुशहाल 
आइसलैंड सबसे खुशहाल राष्ट्र है। एक मात्र ऐसा देश है जिसके पास आर्मी नहीं।


पेड़ पर सोते भालू
क्या आप जानते हैं कि काले भालू कभी-कभी पेड़ पर भी जाकर सो जाते हैं।
टोकेलाऊ में बिजली 
टोकेलाऊ एक मात्र ऐसा द्वीप है, जहां बिजली सिर्फ सौर्य ऊर्जा से आती है।



अगर बिल्ली की हत्या की
प्राचीन मिस्र में बिल्ली की हत्या करने वाले को सजा-ए-मौत दी जाती थी।
समुद्री डाकू 
समुद्री डाकुओं के जहाज का झंडा काला नहीं लाल हुआ करता था।
अंटार्कटिका में 400 झीलें
अंटार्कटिक में बर्फीली जमीन के अंदर 400 से ज्यादा झीलें हैं।

आवाज़ से आग
एक ऐसी डिवाइस भी है, जो आवाज से आग पैदा कर देती है।


पृथ्वी का आकार
अगर अर्थ धूल के कण के बराबर है तो सूर्य संतरे के बराबर होगा।



पिज्जा 
सबसे ज्यादा बिकने वाले पिज्जा पर फंगस की टॉपिंग होती है। वो है मशरूम।
यूरेनस पर दो मौसम
यूरेनस ग्रह पर सिर्फ दो मौसम होते हैं, सर्दी-गर्मी। प्रत्येक मौसम 42 साल तक रहता है।
मनुष्य का दिल
 मनुष्य का दिल 30 फीट की ऊंचाई तक रक्त को फेंक सकता है।



प्लूटो का नाम 
1930 में प्लूटो का नाम इंग्लैंड की 11 साल की बच्ची के नाम पर पड़ा था।
भेड़‍ियां
प्राीचन काल में ग्रीस में मान्यता थी कि मानव मांस खाने से इंसान भेड़‍ियां बन जाता है।

केंचुआ का भोजन
एक केंचुआ हर रोज अपने शरीर के वजन के बराबर भोजन करता है।
दिमाग में बिजली 
हमारे दिमाग में इतनी बिजली होती है, कि उससे एक बल्ब जल सकता है।

If you liked it please, SHARE it with others.
all credit gose to oneindia.com















How To Display MongoDB Data In Reverse In EJS


How To Display MongoDB Data In Reverse In EJS

Hopefully, you tried everything to fetch MongoDB data and display it in reverse order in EJS (Embedded JavaScript). The problem you are facing is when you create new data and try to fetch it in your EJS file, the new one showing down below the old data, Am I right? If that is the problem you are at the right place. In this Web Development tutorial, I will help you overcome this issue.So not wasting Much time lets get started.

Recently I was working on a MEAN Stack project creating a Social Media to collaborate students and teachers in college or school. Where Student can post a new question like status we do a status update on facebook where the new update is shown on top of the old one when we refresh the page. I wanted to achieve that functionality in my Web App. I struggled a lot solving that issue. But it is not a big problem all you have to do is to use one javaScript function. As simple as that.

 Below is the Snapshot of the Problem I was facing.

Writing the New Post.

new post crankyview

New post display at the bottom of old posts after the update.

mondodb error

And a screenshot of the desired result wants I wanted.

mongodb error fixed

And this is how I achieved it.

reverse function javascript

Just use JavaScript reverse( ) function with a forEach loop to reverse the order.

Let me explain you.
ForEach loop in JacaScript is actually an updated version of basic for loop where you don't control the way of iteration with our custom iteration algorithm like we use to do with for loop


1
2
3
4
for(var i=0;i <=n; i++)
{
 //your content here...
}

As we don't have the ability to alter the predefined forEach loop algorithm. What we can do is using other javaScript functions with the loop. and thankfully we have one to reverse the order that is reverse() function.
I am fetching the post from Post schema from my models' directory and iterating over the data with a forEach loop in a reverse order with reverse() function.

That`s it. Hope this helps. If you have any problem give me a chance to help you. Thanks for reading.