It can be defined as one or two values for determining the vertical and horizontal spacing. When only one values is specified, then it sets both horizontal and vertical spacing. When we use the two value syntax, then the first one is used to set the horizontal spacing, and the second value sets the vertical spacing.

syntax:-

border-spacing: length | initian | inherit;

property values:-

length:- This value sets the distance between the borders of the adjacent table cell in px, cm, pt, etc. Negative values are not allowed.

initial:- It sets the property to its default value.

inherit:- It inherit the property from its parent element.

Example:-

Using the value of the border-spacing property. The border- collapse property is set to separate, and value of the border-spacing is set to 45px.

Example:-

Using two values of teh border spacing property. The border-collapse property is set to separate, and the value of teh border-spacing is set to 20pt 1em. The first value, i.e., 20pt sets the horizontal spacing, and the 1 em set the vertical spacing.

The post CSS border-spacing property appeared first on scmGalaxy.

This property has two main values that are seprate and collapse. When it is set to the value seprate, distance between the cells can be defined using the border-specing property. When the border-collapse is set to the value collapse, then the inset value of the border-style property behaves like groove, and the outset value behave like ridge.

Syntax:-

border-collapse: separate| collapse| initial | inherit;

Property values:-

seprate:- It is the default value that seprates the border of the table cell. Using the value, each cell will display its own border.

collapse:- The value is used to collapse the borders into a single border. Using this, two adjacent table cells will share a border. When this value is applied, the border-spacing property does not affect.

initial:- It sets the property to its default value.

inherit: It inherits the propperty form its parent element.

Example- Using seprate value

Example:- Using collapse property:-

The post CSS border- collapse property appeared first on scmGalaxy.

It is shorthand for border top-left-radius, border-top-right, border-bottom- right-radius and border-bottom-left-radius. It gives the rounded shape to the corners of the border of an element. We can specify the border for all four corners of the box in a single declaration using the border-radius. The values of this property can be defined in percentage or length units.If the bottom-left value is omitted, then it will be same as the top-right. If the value of bottom-right is eliminated, then it will be same as the top-left. Similarly, if top-right is eliminated, then it will be the same as top-left.

Let’s see what happens when we provide a single value, two values, three values, and four values to this property.

• If we provide a single value (such as border-radius: 30px;) to this property, it will set all corners to the same value.
• When we specify two values (such as border-radius: 20% 10% , then the first value will be used for the top-left and bottom-right corners, and the second value will be used for the top-right and bottom-left corners.
• When we use three values (such as border-radius: 10% 30% 20%;) then the first value will be used for the top-left corner, the second value will be applied on top-right, and bottom-left corners and the third value will be applied to the bottom-right corner.
• Similarly, when this property has four values (border-radius: 10% 30% 20% 40%;) then the first value will be the radius of top-left, the second value will be used for the top-right, the third value will be applied on bottom-right, and the fourth value is used for bottom-left.

example:-

Border-radius for specific corners:-

It sets the border radius for the top-left corner.

Example:- border-top-right-radius

It sets the border-radius for the top-right corner.

Example- border-bottom-right-radius

It sets the border-radius for the bottom-right corner.

Example- border-bottom-left-radius

It sets the border-radius for the bottom-left corner.

We can specify seprate horizontal and vertical values by using the slash(/) symbol. The values before the slash (/) is used for the horizontal radius and the values after the slash(/) are for the vertical radius.

There is an example given below using the slash(/) symbol.

Example:-

The post CSS tutorial (CSS Border-radius) appeared first on scmGalaxy.

The CSS border is a property is used to set the border on an element.

The CSS border properties are use to specify the style, color and size of the border of an element. The CSS border properties are given below

• border-style
• border-color
• border-width
• border-radius

1.CSS border-style:- The Border style property is used to specify the border type which you want to display on the web page.

There are some border style values which are commenly used for boder-style property. Try it yourself:-

2. CSS border-width:- This property is used to set the border’s width. It is set in pixels. we can also use the one of the three pre-defined values, thin, medium or thick to set the width of the border. Example:-

3. CSS border-colour:- This property is used to set the border color. There are methods to set the color of the border.

1. Name: It specifies the color name. For example:”red”.
2. RGB: It specifies the RGB value of the color. For example: “rgb(255,0,0)”.
3. Hex: It specifies the hex value of the color. For example: “#ff0000”

There is also a border color named “transparent”. If the border color is not set it is inherited from the color property of the element.

The post CSS tutorial part-3 appeared first on scmGalaxy.

CSS selector are used to select those content which we want to style. CSS selector is used to select HTML elements according to its id, class, type, attribute etc.

Types of CSS selector:-

1. CSS element selector
2. CSS Id selector
3. CSS Class selector
4. CSS universal selector
5. CSS Group selector

1. Css Element selector:- CSS element selector selects the HTML element by name.
2. CSS Id Selector:- The Id selector selects the id attributes of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element.
3. CSS Class Selector:- It select the HTML elements with a specific class attribute. It is used with a period character .(full stop symbol) followed by the class name.
4. CSS Universal Selector:- The universal selector is used as a wildcard character. It selects all elements on the page.
5. CSS Group Selector:- It is used on those elements which have same style definations. Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.

CSS Comments:- CSS comments are generally written to explain your code. It is very helpful fir the users who reads your code so that they can easily understand the code. Comments are ignored by the browsers. Comments are the single line or multiple line statements and written in /*……..*/ .

CSS Background:- This property is used to define the backgroud effects on elements. There are 5 CSS background properties that affect the HTML elements.

1. background-color
2. background-image
3. background-repeat
4. background-attachment

1. CSS Background-color:- This property is used to specify the background color of element.

You can set the background color like this:

2.CSS background-image:- The background-image property is used to set an image as a background of an element. By default the image covers the entire element. Example:-

3. CSS background-repeat:- BY default,

the background-image property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically.

The background looks better if the image repeated horizontally only.

4. CSS background-attachment:- Thisproperty is used to specify if the background image is fixed or scroll with the rest of the page in browser window. If you set fixed the background image then the image will not move during scrolling in the browser. example:-

5.CSS background-position:- The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage. we can set the following positions:-

1. centre
2. top
3. bottom
4. left
5. right

The post CSS tutorial part-2 appeared first on scmGalaxy.

CSS Syntax:-

The selector points the HTML elemet you want to style.

The declaration block contains one or more declarations seprated bs semicolons.

Each declaration includes a css property name and value, seprated by a colons.

Multiple CSS declarations are seprated with semicolons, and declarations block are surrounded by curly braces.

Advantages of CSS:-

1. Time saving:-We can write css once and then reuse same sheet in multiple HTML pages. It saves lots of time.
2. Faster load pages:- If we use CSS, we do not need to write HTML tag attributes everytime. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
3. Easy maintenence:- To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
4. Multiple device compatiblity:- Style sheets allow content to be optimized for more than one type of device.
5. Global web standards:- Now HTML attributes are being deprecated and it is bieng recommended to use CSS.

Ways of inserting CSS:-

1. External style sheets
2. Internal style sheets/Embedded Style sheets
3. Inline css

External Style Sheets:-

An external style sheet is a separate document that contains only CSS rules. An external style sheet helps to change the look of an entire website by changing just one css file. It should not contain any HTML Tags. It has .css extension.

Example:-

p { color: red; font-size: 24px;}

h1{ color: blue; font-size: 24em;}

1. Open notepad++ or any other Editor or IDE

2. Write CSS Code

3. Save with .css extension for example geekyshows.css

How to link Web Page to an External Style Sheet:-

The href attribute with <link> element inside the <head> tag is used to link web page to an external style sheet.

<html>

  <head>

    <title>Welcome to Geekyshows</title>

    <link rel=“stylesheet” href=“geekyshows.css”>

  </head>

  <body>

  <h1>I am Heading</h1>

  <p>I am first Paragraph.</p>

  <p>I am second Paragraph</p>

  </body>

</html>

Internal Style Sheets:-

Internal Style sheet is a set of style that is created as a part of HTML document. An internal style sheet may be used if one single page has a unique style.

Internal Style sheets are created using <style> element, which is added inside the <head> element of the HTML document.

Example:-

<html>

  <head>

    <title>Hello CSS</title>

    <style type=“text/css”>

    p { color: red; font-size: 24px;}

  h1{ color: blue; font-size: 24em;}

    </style>

  </head>

  <body>

  <h1>I am Heading</h1>

  <p>I am first Paragraph.</p>

  <p>I am second Paragraph</p>

  </body>

</html>

Inline Styles:-

Inline style is useful when we need to define specific style for individual elements present on a web page. The style attribute in a specific Tag or element, is used to create inline style. The style attribute can contain any CSS property between double quotes.

Ex:-

For paragraph:-

<p style=“color: red; font-size: 22px;”> I am first paragraph</p>

<p> I am second paragraph</p>

For Heading: –

<h1 style=“color: red; font-size: 22px;”> I am Heading</h1>

The post Introduction to CSS(Cascading Style Sheets) Part-1:- appeared first on scmGalaxy.

HTML provides a way of displaying Web pages with text and images or multimedia content. HTML is not a programming language, it is a markup language. An HTML file is a text file containing small markup tags. The markup tags tell the web browser, such as Google chrome or internet explorer, how to display the page. An HTML file must have an htm or html file extension. HTML stands for HyperText Markup Language.

HTML Tags:-

A tag is a bit of text acts as a point demarcation. To create a tag, HTML gives certain characters special meaning: th e angle brackets <and>. putting characters within the brackets creates a tag.
types of tags:
there are two types of tags.

1. Start tag
2. End tag/Closing tag End tag is same as start tag except that it has an extra forward slash after opening angle bracket.

Element:-
The combination of start tag,end tag and things between the two tags are known as contents of teh element.
Attribute:-
Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts:- a name and a value, seprated by an equals sign. the attributes name indicate what type of extra information you are supplying about the element content.

HTML headings:-
HTML headings are defined with the <h1> to <h6> tags. <h1>defines the most important tags and <h6> defines the least important tags.

HTML paragraphs:-
HTML paragraphs are defined with the tag.

HTML links:-
HTML links are defined with the <a> tag.

It is also called anchor tag. The link destination is specified in href attribute.
example:- <a href=”https://www.facebook.com”>This is a link.</a>

HTML images:-
HTML images are defined with teh tag. The source file(src), alternative text(alt), width and height are the attributes used with the with this tag.
example:- <img src=”pic.jpg” alt=”facebook.com” width=”104″ height=”142″>

How to view HTML source?
To see the source code of the html page, right click on the HTML page and then select view page source, or we can use a shortcut key ctrl+u.

Some important attributes:-

1. src attribute:– Ths attribute id used in img tag. The src attribute specifies the path to the image to be displayed.
   Example:-<img src=”img_girl.jpg”>
   
   There are two ways to specify the URL in the src attribute:
   • Absolute URL-Links to an external image that is hosted on another website. Example: src=”https://www.facebook.com/images/img_girl.jpg”.
   • Rekative URL- Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src=”img_girl.jpg”. If the URL begins with a slash, it will be relative to the domain. Example: src=”/images/img_girl.jpg”.

2. Width and height attribute:- the tag contain the width and height attribute, it defines the width and height of the image diaplayed.

3. The Alt attribute:- The required alt attribute for the tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.
4. The style attribute:- the style attribute is used to add atyle to the elment, such as colour, font, size etc.
   exmple:-This is a red paragraph.
5. The lang attribute:- The lang attribute is used inside the tag, to declare the language of the web page.

HTML styles:-

The HTML styles attributes is used to add styles to an element, such as color font size etc.
Background color:- The CSS background-color property defines the background color for an HTML element.

example:-

<body style=”background-color:powderblue;”>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

Text color:-The CSS color property defines the text color for an HTML element.

example:-

<h1 style=”color:blue;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>

Fonts:-The CSS font-family property defines the font to be used for an HTML element.

example:-

<h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>

Text size:- The CSS font-size property defines the text size for an HTML element.

example:-

<h1 style=”font-size:300%;”>This is a heading</h1>
<p style=”font-size:160%;”>This is a paragraph.</p>

Text allignment:-The CSS text-align property defines the horizontal text alignment for an HTML element.

example:-

<h1 style=”text-align:center;”>Centered Heading</h1>
<p style=”text-align:center;”>Centered paragraph.</p>

The post Introduction to HTML. appeared first on scmGalaxy.

It is considered as the easiest and most popular CMS tool due to its features. The main feature of WordPress is its versatility and feasibility to use. There is no use of coding and designing skills for creating a website on this. Even a non-technical person can also create a website with the help of WordPress easily.

WordPress was released on 27th may 2003 by its founders Mike Little and Matt Mullenweg.

WordPress Versions

Older Supported Versions

Latest Version

Future Version

Reasons to use WordPress

1. Anyone can design his/her own website without any designing skills.
2. To create a website on WordPress we only need n Internet connection.
3. It provides a wide range of themes.
4. It provides many free plugins which add extra functionality to our websites.
5. It is free and open source.
6. Adding blog is very easy.
7. It is very fate and secure.
8. very easy to use.

How to create a WordPress website

Creating a site on WordPress is very easy. WordPress is designed in such a way that even non-tech users can also design their own websites easily and attractively.

Here, we’ll discuss each and every step involved in creating a WordPress site.

• Selecting a right platform
• Choosing a domain name and host
• Choosing a theme/template
• Creating new pages
• Adding Content
• Adding Media
• Installing plugins

Selecting a right platform

First you have to decide a suitable platform to build your website with. Here platform means either you want to create your website using HTML, CSS or using a CMS (Content Management Systems).

There are various popular CMS in the market like WordPress, Drupal, Joomla, DotNetNuke, etc.

Why choosing WordPress

For a beginner WordPress will be the best as it doesn’t need any technical skills and due to its flexibility it is suited for all type of users.

You’ll get a lot of options to select a theme as a wide range of community design themes for WordPress. It can handle any type of website whether large or small. Most known websites like CNN, NASA, eBay use WordPress.

Above all, it gives you a responsive site which makes it compatible with small screen devices like mobile phones and tablets.

Shared hosting is best choice for beginners. You can later upgrade your site’s hosting according to the site’s traffic.

Choosing a domain name and host

You need a domain name and a hosting space to get your website online.

Domain name enables you to give your site your own name while hosting gives a space to your site on a server which makes sure your website loads quickly and won’t go down for hours.

Domain name should be short and easy to remember, brand able and catchy which defines your business.

Choosing a domain name is not easy with fulfilling all the criteria as million of domain names are active.

Choosing a theme/template

After installing WordPress, a site appears very plain. To make it more attractive, users install best suitable themes for their site. It adds visuals and views to the front page.

First of all, login to your WordPress site. By default, first screen will be your dashboard.

Accessing Free themes

After login, you’ll get access for 150 free themes.

Look at the above snapshot, to look at the free themes, got the side bar menu of your dashboard, select Appearance >Themes.

Below screen will appear including all the installed themes.

Look at the above snapshot, if you want to install more themes click on Add New button above and install it.

To install a theme, click on Install followed by Activate button.

Creating new pages

Look at the above snapshot, go the sidebar menu, click Pages > Add New option.

Adding Content

Adding new post

At the end we all will come to this point to make our site popular. We need to post different things to increase the popularity of our site.

Clicking on Post > Add New option, the above page will appear on the screen.

There are two ways to write a post, either you may write in Visual editor or in Text editor (in HTML format). Currently this snapshot is of Text editor.

Adding Categories

You can divide your content in different categories by adding categories to them. This tool is handy when you are publishing content for more than one field.

Click on Posts > Categories, you will be directed to the above page.

Here, in Name add a title to your new category. In Slug, you can add some words which will become part of URL while searching.

Tags

Tags are very much similar to Categories with only one difference that each post has its own set of tags.

Enabling or Disabling Comment

Comment creates a debate on some posts or sites. Some users don’t want their visitors to comment. They can shut comment off in WordPress.

To disable a comment for a particular page

• Go to Pages > Add New
• Click on Screen Options on top right
• Tick on Discussions box
• Scroll down, untick Allow Comments option.

• Go to Settings > Discussions
• Untick “Allow people to post comments on new articles”

Editing sidebar

Sidebar which generally appears on the right side (sometimes appears on left) contains widgets like Archives, Categories and Meta, etc.

To edit the side bar, go to Appearance > Widgets

Use drag n drop method to either use a widget or remove a widget.

Adding Media

Every website needs some photos and videos to describe its content and value. WordPress also provide functionality to add a media. You can add image caption, title and description along with media. Also add alt text helps search engine to identify the image.

Installing plugins

Plugins are the extensions in the WordPress with certain piece of coding expanding specific function to you site. They are not built-in.

There are almost 25,000 different plugins options to choose from.

Installation a plugin is very simple. Click Plugins. You will see three options, as shown in the snapshot below.

Click on Plugins > Add New. Following screen will appear in front of you.

You can choose a plugin from the given options. Just click Install Now and you will be able to use it.

The post Introduction of WordPress appeared first on scmGalaxy.

DevOps is the combination of two words, one is Development and other is operation. This allows a single person to handle the entire lifecycle of an application. DevOps helps in collaboration between Development and Operations team to deploy code to production faster. it helps to organization speed to deliver application and services. It is a sequence of development and it operation with better communication and collaboration.

Features of DevOps architecture:

1. Automation

Automation reduces time consumption during testing and development phase. The productivity increases by automation. This will help in catching bugs so that it can be fixed easily.

2. Collaboration

The Development and Operations team collaborates as a DevOps team, which improves the cultural model as the teams become more productive with their productivity, which strengthens accountability and ownership. The teams share their responsibilities and work closely in sync, which in turn makes the deployment to production faster.

3. Integration

The Applications need to integrate with other components in the environment. In integration phase the existing code is combined with new code and tested. The continious integration and testing enables continious development.continious integration helps in to execute delivery in a quicker, safer and reliable manner.

4. Configuration management

It helps the application to interact with only those resources which are concerned with the environment.

Advantages of DevOps:-

• It is a collective responsibility which help in better team engagement and productivity.
• It improves customer satisfaction and experience.
• It is an excellent approach of development and deployment.
• DevOps respond faster to the market changes and improve bussiness and growth.
• it places all the tools in the cloud for customer easy access.

Disadvantages of DevOps:-

• Less availablity of DevOps professionals.
• DevOps is expensive.
• DevOps technology is hard to manage.

DevOps Architecture:-

1. Build

Without DevOps the cost of the consumption of the resource was evaluated based on the pre defined individualsusage with fixed hardware allocation. But DevOps usages the cloud for resource sharing, it is a mechanism to control usage of resources.

2. Code

Many good practices like Git helps in writing the code for bussiness, track changes, getting notified about the freason behind the changes and if necessary reverting to the original code developed.

3.Test

The application will be ready for production after testing. In the case of manual testing, it consumes more time in testing and moving the code to the output. The testing can be automated, which decreases the time for testing so that the time to deploy the code to production can be reduced as automating the running of the scripts will remove many manual steps.

4. Plan

Devops use Agile methodology to plan the development.

5. Monitor

Monitering is used to identify any risk of falilure. It also help in tracking the system accurately so that the health of the application can be monitered easily.

6. Deploy

Many systems can support the scheduler for automated deployment. The cloud management platform enables users to capture accurate insights and view the optimization scenario, analytics on trends by the deployment of dashboards.

7. Operate

The teams operate in a collaboration where both the teams actively participate throughout the services lifecycle.

8. Relaese

Deployment to an environment can be done by automation. But when the deployment is made to the production environment, it is done by manual triggering. many processes involved in release management commonly used to do the deployment in the production environment manually to lessen the impact on the customers.

The post DevOps Introduction appeared first on scmGalaxy.

when we got to any of popular site to register, we notice that they provide feedback when we didn’t fill the data or filled in correct format. we will get message such as:-

“This field is requied(when we leave the field blank).”

“Please enter your phone number in the format XXXXX”(When the data entered is not in correct format).

“Please enter the valid email address.”( when the email entered is not in correct format).

” Password needs to be between 8 to 20 character long and must contain one upper case letter, one symbol and a number.”( A very specific data format is required for the data).

This is called form validation.

OR

Before submitting the data to the server, it is important to ensure that all the fieds are correctly filled. This is called client side validation. It help us to ensure that the data entered matches the requirement. If the data entered is incorrect or simply missing, the server send the data back to the client requesting to resubmit the form with correct data.

There are two types or validation:-

1. Client side validation:- When the validation is done on the browser is called client side validation.
2. Server side validation:- when then the validation is done on server is called server side validation.

Three main reasons of validation:

1. We want to get the right data, in the right format.
2. We want to protect our users data.
3. We want to protect ourselves.

Different types of client side varification:-

There are two types of validation:-

1. built-in form validation:– It uses the HTML5 validation features. This validation generally doesn’t require much JavaScript. Built-in form validation has better performance than JavaScript, but it is not customizable as JavaScript validation.
2. JavaScript:- JavaScript validation is coded using JavaScript. this is completely customizable, but we need to create it or use a library.

Form validation performs 2 functions:-

1. Basic validation:- In this validation the is checked that all the mandatary fields must be filled.
2. Data Format Validation:- In this validation it is checked that all the filled data must be of correct form and value.

Using built-in form validation

One of the most significant features of html5 is the ability to validate user data without relying on JavaScript. This is done by using the validation attributes on form elements. Some of the attributes are written below:

1. required: It specifies that whether a form field needs to be filled in before submitting.
2. minlength: Specifies minimum length of the data.
3. maxlength: Specifies the max length of the data.
4. pattern: Specifies a regular expression that defines the entered data need to be follow.

The post Intorduction to JavaScript-From Validation appeared first on scmGalaxy.

Introduction:-javascript is an object oriented programming language used by several websites for scripting  webpages. It is an interpreated programming language which enables dynamic interactivity on websites.

Features of javascript:-

1.all the websites support javascript, they provide built in execution environment.

2. it is a structured programming, it follows c programming language syntax and structure.

3. it is a case sensitive programming language.

4. it is a light weight interpreated language.

5. it is supportable in several operating system including macOS, windows etc.

Places to put JavaScript code:-

1. Between head tag.
2. Between body tag.
3.  In external file(.js file)

javascriptComment:- it is a meaningful way to deliver messange,warning,suggestion or information about the code .

there are 2 types of javascript comment:

1. Single-line comment
2. Multi-line comment
3. Single line comment:-  single line comment is used by adding forward slashes(//) before the line.
4. Multi line comment:- it is represented by forward slash with asterisk then asterisk with forward slash.

Example:-/* code is here*/

JavaScript variable:- variable in javascript is a name of storage location.

There are 2 types of variables:-

1. Local variable
2. Global variable

Local variable:- Javascript local variable is declared inside the lock or function. It is accessible within the function or block.

Global variable:- It is declared outside the function and accessible from any function.

Javascript datatypes:-Datatypes hold different types of values.

There are two types of data types:-

1. Primitive data type(string,number,Boolean undefined,null)
2. Non-primitive data type(object,Array,RegExp)

Javascript operators:-

. javascript operators are the symbol which are used to perform operations on operands

1.Arithmetic Operators

2. Comparison (relational) operators

3. Bitwise Operators

4. logical Operatiors

5. Assignment Operators

6. Special Operators

Javascript if-else:

If else statement is used to execute wheather condition is true or false.

There are three forms of if ststements in javascript:-

1. If statement
2. If else statement
3. If else if statement

The post What is javascript appeared first on scmGalaxy.

Composer create-project –prefer-dist laravel/laravel admin “5.5.*”

2^nd step:-now go to the project folder and make auth. Code is given below

               php artisan make:auth

3^rd step:- Now install the passport. Write the code given below in command prompt.

    Composer required laravel/passport

4^th step:-open phpmyadmin and make a database.

5^th step:- open .env file and configure the database.

6^th step:- Now migrate the database. Write the code given below in the command prompt

     php artisan migrate

7^th step:-Add the code given below in user model.

       use Laravel\Passport\HasApiTokens;

8^th step:- Add the code given below in auth service proviser(C:\xampp\htdocs\ admin\Providers\AuthorServiceProvider.php)

      use Laravel\Passport\Passport;

9^th step:- Now configure auth.php(C:\xampp\htdocs\admin\config\auth.php)

Change the driver and provider as given below in api:-

‘api’=>[

‘driver’=>’passport’,

‘provider’=>’users’

],

10^th step:- Add the code given below in kernel.php. (C:\xampp\htdocs\ admin\app\Http\Kernal.php)

Protected $routeMiddleware=[

‘client’_credentials’=>\Laravel\Passport\Http\Middleware\CheckClientcredentials::class,

11^th step:-Add the code given below in app.php(config\app.php)

/*

   *Application Service Providers…

  */

 //Passport Service provider

    Laravel\Passport\PassportServiceprovider::class,

];

12^th step:- Write the code given below in command prompt.

              php artisan passport:install

      Encryption keys generated successfully.

The post HOW TO CREATE API IN LARAVEL appeared first on scmGalaxy.

2^nd step:- Write the code given below in the opened command prompt to make laravel project.

   composer create-project --prefer-dist laravel/laravel ImageUpload "5.8.*"

3^rd step:- After the project is created, open the folder in any code editor.

4^th step:- Now open xampp. And make a database.

5^th step:- Open the .env file of the project and change the name of the database same as defined in phpmyadmin.

6^th step:- Write the code given below in command prompt to make controller.

php artisan make:controller ImageUpload

7^th step:- Write the code given below in command prompt to make model.

  php artisan make:model ImageUpload –m

8^th step:- write the name of the column of the databse in

database\migrations\2020_10_23_070450_create_ images _ upload _table.php

9^th step:- Write the code given below in command prompt to migrate the table to the database.

                  php artisan migrate

10^th step:-Then make view page in resource\views

Code of imageupload.blade.php

11^th step:- Make one blade file resources/view/dynamic_email_template.blade.php

And paste the code given below:-

<p style=”margin-left:10%;”>First Name – <b>{{ $data[‘name’] }} </b></p>

<p style=”margin-left:10%;”>last Name – <b>{{ $data[’email’] }}  </b></p>

<p>It would be appriciative, if you gone through this feedback.</p>

12^th step:- Go to web.php and make routes.

The code is given below:-

Route::get(‘sendemail’,’SendEmailController@index’);

Route::post(‘sendemail.store’,’SendEmailController@store’)->name(‘sendemail.store’);

13^th step:- Go to controller and call model class

Paste the code given below below

14^th step:- Now make the mail. Write the code given below in command prompt:-

php artisan make:mail SendMail

15^th step:- Paste the code given below in the file made by the above command:-

16^th step:- Make an account in mailtrap. 17^th step.

17^th step:- copy host, port, Username and password.

18^th step:-configure .env file with the details copied by the mailtrap id.

19^th step:- Now run the command given below in the terminal.

php artisan c:cache

php artisan serve

The post How to upload image in the database and send mail image appeared first on scmGalaxy.

Introduction:- AJAX stands for Asynchronous Javascript And XML. AJAX is used for fast creating dynamic web pages. It allow web pages to be updated asynchronously by exchanging some amount of data with the server behind the scenes. It is possible to update some parts of a web page without reloading the whole page. There are many web applications that run on ajax example:- gmail,facebook,twitter,google map, youtube etc.

Understanding synchronous and asynchronous:-

Synchronous:- The synchronous request blocks the client until the operation completes.

Asynchronous:-  Asynchronous request doesn’t block the client. At the time when the request is processing, user can perform another operation.

Some AJAX technologies:-

As we know ajax is not a technology but group of inter related technologies.some of the technologies is given below:

1.HTML/XHTML and CSS

2.XML and JSON

3.DOM

4.XMLHttpRequest

5.javascript

1. HTML/XHTML and CSS:- These are the technologies which are used for developing front end of a websites and styling.
2. XML and JSON:- It is used for carrying data to and from the server
3. DOM:- It is used for dynamic display and interaction with the data.
4. XMLHttpRequest:- It is used for asynchronous communication between client and server .
5. Javascript:-It is a text based programming language used client side and server side both. Javascript allows to make the web pages imteractive.

HOW AJAX WORKS:-

AJAX communicates with the server using XMLHttpRequest. The user sends the request from the UI and the javascript call goes to XMLHttpRequest object. Then the Http request is send to the server. Then the server interact with the database and data is retrived. The server sends te data to the XMLHttpRequest callback function. And HTML and CSS data is displayed on the browser.

The post WHAT IS AJAX? appeared first on scmGalaxy.

1^st step:-open command prompt on xampp\htdocs directory.

2^nd step:-Create laravel project with command given below

3^rd step:- move to the project directory on command prompt.

4^th step:-Write the command given below for user      Authentication

     php artisan make:auth

5^th step:- write the given code in  (database/migration/2014_10_12_000000_create_user_table.php)

6^th step:- create model and migration. Write the command given below in command prompt.

           php artisan make:model Role -m

7^th step:- write the given code in  (database/migration/ 2020_06_10_060108_create_roles_table)

8^th step:- In role model create users() function for relationship. Paste the code in Role.php file given below:-

9^th step:- In user model create roles() function for relationship.

Paste the code in User.php file given below:-

10^th step:- Now create seeder file for user. File name                UserTableSeeder. Write the command given below in command prompt to create UserTableSeeder:-

php artisan make:seed UsersTableSeeder

   11^th step:- Now create seeder file for Role. File name                RoleTableSeeder. Write the command given below in command prompt to create RoleTableSeeder:-

        php artisan make:seed RolesTableSeeder

12^th step:-Add insert function in RolesTableSeeder.php file(database/seeds/RolesTableSeeder.php)

Add DB file given below:-

use Illuminate\Support\Facades\DB;

Paste the code given below in RolesTableSeeder.php:-

13^th step:-Add insert function in RolesTableSeeder.php file(database/seeds/UsersTableSeeder.php).

Add DB file given below:-

use Illuminate\Support\Facades\DB;

Paste the code given below in UsersTableSeeder.php:-

14^th step:-Create Database in mysql.(database name=devopsschool)

15^th step:- Go to .env file and set database=devopsschool,username=root

Code for .env file is given below:-

16^th step:- Migrate the table to the database. Write the command given below in command prompt:-

php artisan migration

17^th step:- Define RoletableSeeder and UserTableSeeder class on Database.php file. The code is given below:-

18^th step:- insert datas in tables. Write the code given below in command prompt:

   php artisan db:seed

19^th step:- create DashboardController for Admin. Write the code given below in command prompt:

php artisan make:controller Admin/DashboardController

20^th step:- create DashboardController for Admin. Write the code given below in command prompt:

php artisan make:controller User/DashboardController

21^st step:- create Adminmiddleware for Admin. Write the code given below in command prompt.

php artisan make:middleware AdminMiddleware

22^nd step:- create Usermiddleware for User. Write the code given below in command prompt.

php artisan make:middleware UserMiddleware

23^rd step:- Use Auth class for authentication in AdminMiddleware.php

24^th step:- implement condition in handle() function of AdminMiddleware.php. Code of AdminMiddleware.php is given below:

25^th step:- Use Auth class for authentication in UserMiddleware.php.

26^th step:- :- Implement condition in handle() function of UserMiddleware.php. Code of UserMiddleware.php is given below:

27^th step:-   Implement Condition for Admin and User Login in RedirectIfAuthenticated(app/Http/Middleware/RedirectIfAuthenticated.php). code given below:

28^th step:- remove =/home from protected $redirectTo = ‘/home’; from (app/Http/Controllers/Auth/LoginController.php).

29^th step:- implement condition in _construct() function in (app/Http/Controllers/Auth/LoginController.php).

 code given below:-

30^th step:- remove =/home from protected $redirectTo = ‘/home’; from (app/Http/Controllers/Auth/LoginController.php).

31^st step:- implement condition in _construct() function in (app/Http/Controllers/Auth/ResetPasswordController.php)

code given below:-

32^nd step:- use AdminMiddleware in Kernal.php file

use App\Http\Middleware\AdminMiddleware;

33^rd step:-Define AdminMiddleware in routemiddleware in kernel.php file

'admin' => AdminMiddleware::class,

34^th step:- use UserMiddleware in Kernal.php file

use App\Http\Middleware\UserMiddleware;

35^th step:- define UserMiddleware in routeMiddleware

'user' => UserMiddleware::class,

36^th step:- set Admin middleware and Route. In (route/web.php)

37^th step:- set user middleware and route. In (route/web.php)

Code of web.php file is given below:-

The post How to Create Multiple Role Based Authentication and Access control in Laravel 5.8 appeared first on scmGalaxy.

1^st step:-First we have to download laravel (version-5.8).to download laravel we have to go to command prompt, and then go to the folder path in which you want to download laravel. After  this run the composer command.(command givel below):-

composer create-project laravel/laravel=5.8 crud –prefer-dist

2^nd step:- After downloading laravel, we have to make MySql database.

3^rd step:- now open .env file of the model and configure like the image given below:

4^th step:- Make the migration folder by the writing the        command given below on command prompt:

      php artisan make:migration create_crud_table –create=crud

This command make a migration file in database\migration in this file we have to define the required column which we want to create in the database table.

The code for migration:-

                     <?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateCrudsTable extends Migration

{

    /**

     * Run the migrations.

     *

     * @return void

     */

    public function up()

    {

        Schema::create(‘cruds’, function (Blueprint $table) {

            $table->bigIncrements(‘id’);

            $table->string(‘first_name’);

            $table->string(‘last_name’);

            $table->string(‘image’);

            $table->timestamps();

        });

    }

    /**

     * Reverse the migrations.

     *

     * @return void

     */

    public function down()

    {

        Schema::dropIfExists(‘cruds’);

    }

}

Now we have to migrate the table to the database. The command to migrate the table to tahe database is:-

            Php artisan migrate

Write the above code in command prompt. 

5^th step:- Now make a model by using the command

                 Php artisan make:moedel model_name –m

By the above command a new file is created with .php extension in app folder.

6^th step:- Paste the code given below in the file created in               5^th step

     <?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class crud extends Model

{

  protected $fillable =[

      ‘first_name’, ‘last_name’, ‘image’

  ];

}

7^th step:- Now create controller. The code to create controller is given below

   Php artisan make:controller CrudController –resource

Note: crud of CrudController is name of the model.

8^th step:- This is the most important step. In this step we set up the route for all the CrudController class  method. Write the below code in route\web.php file.

     <?php

/*

|————————————————————————–

| Web Routes

|————————————————————————–

|

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the “web” middleware group. Now create something great!

|

*/

Route::get(‘/’, function () {

    return view(‘welcome’);

});

Route::resource(‘crud’,’CrudsController’);

9^th step:- Now code the view file in resource\views folder. All the html,css and javascript code is written in this file.

We make new file for the view in resource\views\filename.blade.php

Code is given below

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Document</title>

</head>

<body>

@extends(‘Crud.parent’)

@section(‘main’)

<div align=”right”>

    <a href=”{{route(‘crud.create’)}}”class=”btn btn-success btn-sm”>Add</a>

</div>

@if ($message = Session::get(‘success’))

<div class=”alert alert-success”>

<p>{{$message}}</p>

</div>

@endif

<table class=”table table-bordered table-striped”>

 <tr>

  <th width=”10%”>Image</th>

  <th width=”35%”>First Name</th>

  <th width=”35%”>Last Name</th>

  <th width=”30%”>Action</th>

 </tr>

 @foreach($data as $row)

  <tr>

   <td><img src=”{{ URL::to(‘/’) }}/images/{{ $row->image }}” class=”img-thumbnail” width=”75″ /></td>

   <td>{{ $row->first_name }}</td>

   <td>{{ $row->last_name }}</td>

   <td>

        <a href=”{{route(‘crud.show’, $row->id) }}” class=”btn btn-primary”>Show</a>

        <a href=”{{route(‘crud.edit’, $row->id) }}” class=”btn btn-warning”>Edit</a>

        <form action=”{{route(‘crud.destroy’,$row->id) }}”

        method=”post”>

        @csrf

        @method(‘DELETE’)

        <button type=”submit” class=”btn btn-danger”>Delete</button>

        </form>

   </td>

  </tr>

 @endforeach

</table>

{!! $data->links() !!}

@endsection

</body>

</html>

10^th step:- Now code the controller.

 Code for the controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Crud;

class CrudsController extends Controller

{

    /**

     * Display a listing of the resource.

     *

     * @return \Illuminate\Http\Response

     */

    public function index()

    {

        $data = Crud::latest()->paginate(5);

        return view(‘Crud.index’, compact(‘data’))

                ->with(‘i’, (request()->input(‘page’, 1) – 1) * 5);

    }

    /**

     * Show the form for creating a new resource.

     *

     * @return \Illuminate\Http\Response

     */

    public function create()

    {

        return view(‘Crud.create’);

    }

    /**

     * Store a newly created resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @return \Illuminate\Http\Response

     */

    public function store(Request $request)

    {

        $request->validate([

            ‘first_name’    =>  ‘required’,

            ‘last_name’     =>  ‘required’,

            ‘image’         =>  ‘required|image|max:2048’

        ]);

        $image = $request->file(‘image’);

        $new_name = rand() . ‘.’ . $image->getClientOriginalExtension();

        $image->move(public_path(‘images’), $new_name);

        $form_data = array(

            ‘first_name’       =>   $request->first_name,

            ‘last_name’        =>   $request->last_name,

            ‘image’            =>   $new_name

        );

        Crud::create($form_data);

        return redirect(‘crud’)->with(‘success’, ‘Data Added successfully.’);

    }

    /**

     * Display the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function show($id)

    {

        $data = Crud::findOrFail($id);

        return view(‘Crud.view’, compact(‘data’));

    }

    /**

     * Show the form for editing the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function edit($id)

    {

        $data = Crud::findOrFail($id);

        return view(‘Crud.edit’, compact(‘data’));

    }

    /**

     * Update the specified resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function update(Request $request, $id)

    {

         $image_name = $request->hidden_image;

        $image = $request->file(‘image’);

        if($image != ”)

        {

            $request->validate([

                ‘first_name’    =>  ‘required’,

                ‘last_name’     =>  ‘required’,

                ‘image’         =>  ‘image|max:2048’

            ]);

            $image_name = rand() . ‘.’ . $image->getClientOriginalExtension();

            $image->move(public_path(‘images’), $image_name);

        }

        else

        {

            $request->validate([

                ‘first_name’    =>  ‘required’,

                ‘last_name’     =>  ‘required’

            ]);

        }

        $form_data = array(

            ‘first_name’       =>   $request->first_name,

            ‘last_name’        =>   $request->last_name,

            ‘image’            =>   $image_name

        );

        Crud::whereId($id)->update($form_data);

        return redirect(‘crud’)->with(‘success’, ‘Data is successfully updated’);

    }

    /**

     * Remove the specified resource from storage.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function destroy($id)

    {

        $data = Crud::findOrFail($id);

        $data->delete();

        return redirect(‘crud’)->with(‘success’, ‘Data is successfully deleted’);

    }

}

Code for index file

resources/views/index.blade.php

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Document</title>

</head>

<body>

@extends(‘Crud.parent’)

@section(‘main’)

<div align=”right”>

    <a href=”{{route(‘crud.create’)}}”class=”btn btn-success btn-sm”>Add</a>

</div>

@if ($message = Session::get(‘success’))

<div class=”alert alert-success”>

<p>{{$message}}</p>

</div>

@endif

<table class=”table table-bordered table-striped”>

 <tr>

  <th width=”10%”>Image</th>

  <th width=”35%”>First Name</th>

  <th width=”35%”>Last Name</th>

  <th width=”30%”>Action</th>

 </tr>

 @foreach($data as $row)

  <tr>

   <td><img src=”{{ URL::to(‘/’) }}/images/{{ $row->image }}” class=”img-thumbnail” width=”75″ /></td>

   <td>{{ $row->first_name }}</td>

   <td>{{ $row->last_name }}</td>

   <td>

        <a href=”{{route(‘crud.show’, $row->id) }}” class=”btn btn-primary”>Show</a>

        <a href=”{{route(‘crud.edit’, $row->id) }}” class=”btn btn-warning”>Edit</a>

        <form action=”{{route(‘crud.destroy’,$row->id) }}”

        method=”post”>

        @csrf

        @method(‘DELETE’)

        <button type=”submit” class=”btn btn-danger”>Delete</button>

        </form>

   </td>

  </tr>

 @endforeach

</table>

{!! $data->links() !!}

@endsection

</body>

</html>

Code for create file

resources/views/create.blade.php

   <!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Document</title>

</head>

<body>

@extends(‘Crud.parent’)

@section(‘main’)

@if($errors->any())

<div class=”alert alert-danger”>

 <ul>

  @foreach($errors->all() as $error)

  <li>{{ $error }}</li>

  @endforeach

 </ul>

</div>

@endif

<div align=”right”>

 <a href=”{{ route(‘crud.index’) }}” class=”btn btn-default”>Back</a>

</div>

<form method=”post” action=”{{ route(‘crud.store’) }}” enctype=”multipart/form-data”>

 @csrf

 <div class=”form-group”>

  <label class=”col-md-4 text-right”>Enter First Name</label>

  <div class=”col-md-8″>

   <input type=”text” name=”first_name” class=”form-control input-lg” />

  </div>

 </div>

 <br />

 <br />

 <br />

 <div class=”form-group”>

  <label class=”col-md-4 text-right”>Enter Last Name</label>

  <div class=”col-md-8″>

   <input type=”text” name=”last_name” class=”form-control input-lg” />

  </div>

 </div>

 <br />

 <br />

 <br />

 <div class=”form-group”>

  <label class=”col-md-4 text-right”>Select Profile Image</label>

  <div class=”col-md-8″>

   <input type=”file” name=”image” />

  </div>

 </div>

 <br /><br /><br />

 <div class=”form-group text-center”>

  <input type=”submit” name=”add” class=”btn btn-primary input-lg” value=”Add” />

 </div>

</form>

@endsection

</body>

</html>

Code for view file

resources/views/view.blade.php

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Document</title>

</head>

<body>

@extends(‘parent’)

@section(‘main’)

<div class=”jumbotron text-center”>

 <div allign=”right”>

  <a href=”{{ route(‘crud.index’) }}” class=”btn btn-default”>Back</a>

 </div>

 <br />

 <img src=”{{ URL::to(‘/’) }}/images/{{ $data->image }}” class=”img-thumbnail” />

 <h3>First Name – {{ $data->first_name }} </h3>

 <h3>Last Name – {{ $data->last_name }}</h3>

</div>

@endsection

</body>

</html>

  Code for edit file

resources/views/edit.blade.php

      <!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Document</title>

</head>

<body>

@extends(‘parent’)

@section(‘main’)

            @if ($errors->any())

                <div class=”alert alert-danger”>

                    <ul>

                        @foreach ($errors->all() as $error)

                            <li>{{ $error }}</li>

                        @endforeach

                    </ul>

                </div>

            @endif

            <div align=”right”>

                <a href=”{{ route(‘crud.index’) }}” class=”btn btn-default”>Back</a>

            </div>

            <br />

     <form method=”post” action=”{{ route(‘crud.update’, $data->id) }}” enctype=”multipart/form-data”>

                @csrf

                @method(‘PATCH’)

      <div class=”form-group”>

       <label class=”col-md-4 text-right”>Enter First Name</label>

       <div class=”col-md-8″>

        <input type=”text” name=”first_name” value=”{{ $data->first_name }}” class=”form-control input-lg” />

       </div>

      </div>

      <br />

      <br />

      <br />

      <div class=”form-group”>

       <label class=”col-md-4 text-right”>Enter Last Name</label>

       <div class=”col-md-8″>

        <input type=”text” name=”last_name” value=”{{ $data->last_name }}” class=”form-control input-lg” />

       </div>

      </div>

      <br />

      <br />

      <br />

      <div class=”form-group”>

       <label class=”col-md-4 text-right”>Select Profile Image</label>

       <div class=”col-md-8″>

        <input type=”file” name=”image” />

              <img src=”{{ URL::to(‘/’) }}/images/{{ $data->image }}” class=”img-thumbnail” width=”100″ />

                        <input type=”hidden” name=”hidden_image” value=”{{ $data->image }}” />

       </div>

      </div>

      <br /><br /><br />

      <div class=”form-group text-center”>

       <input type=”submit” name=”edit” class=”btn btn-primary input-lg” value=”Edit”/>

      </div>

     </form>

@endsection

</body>

</html>

The post LARAVEL CRUD appeared first on scmGalaxy.

Bootstrap is framework of HTML,CSS and JavaScript for developing responsive websites. It is free to use and download. It is front end framework which makes web development faster and easier. It have many HTML and CSS based templates for  forms,buttons,tables etc.

HISTORY:-

Bootstrap was developed by Mark Otto and Jacob Thorton. It was first released as an open source in August 2011.

ADVANTAGES:-

1. Bootstrap is very easy to use.
2. Anyone who have basic knowledge of HTML and CSS can use it very easily.
3. It help users to develop responsive websites very easily.
4. Bootstrap is compatible on most of the browser.

BOOTSTRAP CONTAINER:-

The container class is used to create boxed content.

Example:-

1.         <html>  
2.  <body>  
3.   <div class=“container”>  
4.    <div class=“row”>  
5.      <div class=“col-md-xx”></div>  
6.        …  
7.    </div>  
8.    <div class=“row”>  
9.      <div class=“col-md-xx”></div>  
10.        …  
11.    </div>  
12.   </div>  
13.  </body>  
14. </html>  

BOOTSTRAP JUMBTRON:-

The jumptron is used to specify big box for getting extra attention. It is a box with rounded corner. It is used in <div>.

Example:-

1. <!DOCTYPE html>  
2. <html lang=“en”>  
3. <head>  
4.   <title>Bootstrap Example</title>  
5.   <meta charset=“utf-8”>  
6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>  
7.   <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>  
8. </head>  
9. <body>  
10.   
11. <div class=“container”>  
12.   <div class=“jumbotron”>  
13.     <h1>This is Jumbotron inside container!</h1>        
14.     <p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p>  
15.   </div>  
16.   <p>This is some text.</p>        
17.   <p>This is another text.</p>        
18. </div>  
19.   
20.   <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>  
21.   <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>  
22. </body>  
23. </html>

BOOTSTRAP BUTTONS:-

There are 7 buttons present in boot strap:

1. .btn-primary
2. .btn-default
3. .btn-info
4. .btn-danger
5. .btn-link
6. .btn-warning
7. .success  

Example:-

1. <!DOCTYPE html>  
2. <html lang=“en”>  
3.   <head>  
4.      <title>Job</title>  
5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>  
6.   </head>  
7.   <body>  
8.     <h1>Button Example!</h1>  
9.   
10. <button class=“btn btn-default”>default</button>  
11. <button class=“btn btn-primary”>primary</button>  
12. <button class=“btn btn-danger”>danger</button>  
13. <button class=“btn btn-success”>success</button>  
14. <button class=“btn btn-info”>info</button>  
15. <button class=“btn btn-warning”>warning</button>  
16. <button class=“btn btn-link”>Link</button>  
17.   
18. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
19.   <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>  
20.   </body>  
21. </html>  

Classes for button size:-

1. .btn-lg
2. .btn-md
3. .btn-sm
4. .btn-xs

BOOTSTRAP TABLES:-

We can use bootstrap to design different types or table.

Example:-

1. <!DOCTYPE html>  
2. <html lang=“en”>  
3.   <head>  
4.      <title>Job</title>  
5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>  
6.   </head>  
7.   <body>  
8.   
9. <div class=“container”>  
10.   <h1>Basic Table Example</h1>  
11.   
12. <table class=“table”>  
13.   <tr><th>Id</th><th>Name</th><th>Age</th></tr>  
14.   <tr><td>101</td><td>Rahul</td><td>23</td></tr>  
15.   <tr><td>102</td><td>Umesh</td><td>22</td></tr>  
16.   <tr><td>103</td><td>Max</td><td>29</td></tr>  
17.   <tr><td>104</td><td>Ajeet</td><td>21</td></tr>  
18. </table>  
19.   
20. </div>  
21.   
22. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>  
23.   <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>  
24.   </body>  
25. </html>  

• <tr> is used for table row.
• <td> is used for table data.
• <th> is used for table heading.

BOOTSTRAP FORMS:-

There are three types of forms in bootstrap.

1. Horizontal form
2. Vertical form
3. Inline form

Example 1( vertical form):-

1. <!DOCTYPE html>  
2. <html lang=“en”>  
3.   <head>  
4.      <title>Bootstrap example</title>  
5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>  
6.   </head>  
7.   <body>  
8.   
9. <div class=“container”>  
10.   <h1>Vertical Form Example</h1>  
11.   
12. <form style=“width:300px”>  
13.   <div class=“form-group”>  
14.     <label for=“exampleInputEmail1”>Email address</label>  
15.     <input type=“email” class=“form-control” id=“exampleInputEmail1” placeholder=“Email”>  
16.   </div>  
17.   <div class=“form-group”>  
18.     <label for=“exampleInputPassword1”>Password</label>  
19.     <input type=“password” class=“form-control” id=“exampleInputPassword1” placeholder=“Password”>  
20.   </div>  
21.     
22.   <button type=“submit” class=“btn btn-default”>Login</button>  
23. </form>  
24.   
25. </div>  
26.   
27. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>  
28.   <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>  
29.   </body>  
30. </html>  

Horizontal form:-

1. <!DOCTYPE html>  
2. <html lang=“en”>  
3. <head>  
4.   <title>Bootstrap Example</title>  
5.   <meta charset=“utf-8”>  
6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>  
7.   <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>  
8.     
9. </head>  
10. <body>  
11.   
12. <div class=“container”>  
13.   <h2>Horizontal form Example</h2>  
14.   <form class=“form-horizontal” role=“form”>  
15.     <form style=“width:300px”>  
16.   <div class=“form-group”>  
17.       <label class=“control-label col-sm-2” for=“email”>Email:</label>  
18.       <div class=“col-sm-10”>  
19.         <input type=“email” class=“form-control” id=“email” placeholder=“Enter email”>  
20.       </div>  
21.     </div>  
22.     <div class=“form-group”>  
23.       <label class=“control-label col-sm-2” for=“pwd”>Password:</label>  
24.       <div class=“col-sm-10”>            
25.         <input type=“password” class=“form-control” id=“pwd” placeholder=“Enter password”>  
26.       </div>  
27.     </div>  
28.     
29.   <div class=“form-group”>          
30.       <div class=“col-sm-offset-2 col-sm-10”>  
31.         <button type=“submit” class=“btn btn-default”>Submit</button>  
32.       </div>  
33.     </div>  
34.   </form>  
35. </div>  
36. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>  
37. <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>  
38.   
39. </body>  
40. </html>  

Inline form:-

1. <!DOCTYPE html>  
2. <html lang=“en”>  
3. <head>  
4.   <title>Bootstrap Example</title>  
5.   <meta charset=“utf-8”>  
6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>  
7.   <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>  
8.     
9. </head>  
10. <body>  
11.   
12. <div class=“container”>  
13.   <h2>Inline form Example</h2>  
14.   <form class=“form-inline” role=“form”>  
15.     <form style=“width:300px”>  
16.   <div class=“form-group”>  
17.     <label for=“exampleInputEmail1”>Email address</label>  
18.     <input type=“email” class=“form-control” id=“exampleInputEmail1” placeholder=“Email”>  
19.   </div>  
20.   <div class=“form-group”>  
21.     <label for=“exampleInputPassword1”>Password</label>  
22.     <input type=“password” class=“form-control” id=“exampleInputPassword1” placeholder=“Password”>  
23.   </div>  
24.     
25.   <button type=“submit” class=“btn btn-default”>Login</button>  
26. </form>  
27.   
28. </div>  
29. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>  
30.   <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>  
31.   
32. </body>  
33. </html>  

The post Bootstrap Tutorial appeared first on scmGalaxy.

Let’s briefly discusses about the characteristics of robots and various models. The robots are generally assumed as points. The point robots are dimensionless and they occupy no physical space on the plane. While in many problems, the robots are assumed to be three dimensional, are called as fat robots. These fat robots occupy physical space on the plane due to which they can hamper the visibility and movement of other robots.

Depending on the type of problem, robots can have different characteristics. Different settings evolve from different assumptions that are made on the robots capabilities. In particular, visibility of the robots, their orientation and directions, ability to store the past information, the computational cycle, etc. During its life, each robot executes four states look, compute, wait and move, this sequence is called computational cycle.

We have discussed some simple interactions that can occur between the robots such as aggregation, collision avoidance, dispersion, following and homing. These simple interactions can be used to solve complex task assigned to the robots.

2.1 The Properties of Robots

Each robot is assumed to occupy a point on a two dimensional plane. These robots are equipped with sensorial capability that allows them to sense their surroundings. A robot then computes a destination point according to the data it sensed. Finally, robot moves to the destination point it just computed. Moreover, the robots can have the following properties depending upon the type of model it follows:

1. Homogeneity: Robots may be homogeneous or heterogeneous in terms of their hardware and software. Robots are said to be homogeneous if they are identical in terms of shape and size, visibility, computational power, memory, etc. In most of the cases robots are assumed to be homogeneous. However, there are some cases where robots are assumed to be heterogeneous also [25].

• Autonomous: Robots are said to be autonomous if they do not depend on any central coordination system. But, in many cases system has been found to be centralized also.

• Mobility: The ability of a robot to move on plane is called mobility of the robot. Motorial capability of robot allows them to move on a plane.

• Anonymity: The robots are said to be anonymous if they do not have any identification that they can use during the computation. However, in some cases robots may not be anonymous.

• Memoryless: Some robots have the capability to store and use the past information, while some robots do not have this capability called oblivious.

• Communication: Robots cannot communicate explicitly with each other. It happens by means of observing the positions of other robots in the plane.

The post BASICS OF ROBOTS appeared first on scmGalaxy.

The app directory has the base code for the application. The app directory contains variety of  directories like console,Http,providers etc. These directories are created by the make artisan command which we use to generate classes.

The directories inside app directory are:-

1.Broadcasting Directory

2.Console Directory

3.Events Directory

4.Exception Directory

5.Http Directory

6.Jobs Directory

7.Listners Directory

8.Mail Directory

9.Notification Directory

10.Policies Directory

11.Providers Directory

12.Rules Directory

1.Broadcasting Directory:- All the broadcasting channels are stored in broadcasting Director. These channels are generated by make:model command. This directory doesn’t exist by default. It will be created when we create our first channel.

2.Console Directory:- The console directory contains all of the project artisian commands for the application. These commands are generated by using make:command command. This directory is also house for krenal.php where custom artisian commands are registered and tasks are defined.

3.Events Directory:-The event directory holds the events files that the laravel application may pop up. This directory doesn’t exist by default, but will be created by event:generate and make:event Artisian commands.

4.Exception Directory:-This directory holds all the exception handling files. The exception thrown by the application is stored in this directory. We can customize how the exceptions are logged or rendered by modifying the handler class in the directory.

5.Http directory:- This directory contains controllers,middlewares, and form requests. All of the logic to handle requests entering your application will be placed in this directory.

6.Jobs Directory:- This directory doesn’t exist by default. It will created by make:job Artisan command. The job directory holds all lineup jobs in this directory.

 7.Listners Directory:- This directory doesn’t exist by default. It will created by event:generate or make:listeners Artisan command. This directory contains the classes that handle your events.

8.Mail Directory:- :- This directory doesn’t exist by default. It will created by make:mail Artisan command.This directory holds all the emails send by th e laravel project.

9.Notification Directory:- This directory doesn’t exist by default. It will created by make:notification Artisian command.This directory conatins all of the transactional notification that are sent by your application.

10.Policies Directory:- This directory doesn’t exist by default. It will created by make:policy Artisian command. This directory holds the different policies of your laravel project.

11.Providers Directory:- This directory is used for containing containing different service providers.

12.Rules Directory:- This directory doesn’t exist by default. It will created by make:rule Artisian command. The rules directory contains the custom validation rule objects for your application. Rules are used to encapsulate complicated validation logic in a simple object.

The post Brief Description about Laravel App directory appeared first on scmGalaxy.

Laravel is PHP framework, which is easy to understand and robust and open source also. It also offer the rich set of functionalities that incorporates the basic features of PHP framework such as Codelgniter, yii, and other programming languages like Ruby on Rails. It is a PHP framework that uses the MVC architecture.

MVC vs NON-MVC:

Let’s first understand the MVC architecture.

MVC stands for Model-View Controller. It is a software design pattern by which creation of huge applications becomes easy. It does not belong to specific programming language or framework, but it is a concept that you can use creating any kind of application or software in any programming language.

Advantages:

Easy to update the application.

Easy for the developers to collaborate and wor together.

East to debug because of multilevel properly written application.

Development becomes fast.

Disadvantages:

MVC architecture is little bit difficult to understand.

Setting up laravel project:

How to set up a Laravel Project

Setting up laravel project is very easy task.

First we need to install composer and xampp in our system. The open command prompt in xampp\htdocs  file.

Install laravel there. The command to install laravel is – composer global require “laravel/installer=~1.1” (NOTE= 1.1 is a larvael version)

After installation of laravel we need to create a project. The command to a  create project is- composer create-project—prefer-dist laravel/laravel blog”5.8.*” (NOTE: blog is name of the project, so we can give any name.)

Understanding the folder structure:

After the laravel project is created, different types of files and folders are created. All the files and folder help us in writing codes

List of folders created:

1.App

2. Bootstrap

3. Config

4.Database

5. Public

6.Resources

7.Routes

8. Storage

9. Tests

10. vendor

1. APP:- The app directory contains the base code of the application.

2. Bootstrap:- The bootstrap directory containd all the app.php files and bootstrapping scripts uded for the application. In this directory there is cache directory which contains framework generated files for performance optimization such as the route and services cache files.

3.Config:- As the name implies, this directory contains all the configuration files.

4. Database:- Database directory contains all the Database files.

5. Public:- In public directory contains the index.php file, which is the entry point for all request entering the application and configures the autoloading. This directory maintains all the other important files like  Javascript, CSS and images. 

6.Resources:- Resources directory contains the views and  un-compiled assets like CSS and JavaScript. It also contains language files, sas files and templetes(if any).

7.Routes:-In routes directory all the laravel routes are defined in routes file. It contain the definition files for routing such as api.php, wed.php etc.

8. Storage:- The storage directory contains file based sessions, file caches, compiled blade templates and many other files which are created by the framework. This is segregated into framework, app and logs directories.

9. Tests:- Test directories holds all the test cases.

10. Vendor:- The vendor directory holds all composer dependency files.

A Quick intro to the Artisian Command line Interface

 Artisian is a command line interface which is  frequently used in laravel and it have set of helpful commands for developing a web application.

Few commands of Artisian:-

1. php artisian server (To start Laravel project)
2. php artisian route:cache (To enable caching mechanism)
3. php artisian list (To view the lit of available commands supported by Artisian)
4. php artisian help serve (to view help about any command and view the available options and arguments)

The post Introduction to Laravel appeared first on scmGalaxy.