PHP & Web Development Blogs

Search Results For: multiple
Showing 6 to 10 of 20 blog articles.
675 views · 4 months ago



To bridge the gap between web-based and cloud-based applications, businesses often rely on skilled DevOps developers. These professionals play a crucial role in ensuring seamless integration, efficient customization, and robust back-end infrastructure for applications. The expertise of DevOps developers is indispensable for optimizing development workflows and enhancing collaboration between development and operations teams in the dynamic landscape of app development services.

In the realm of cloud computing, web based application in cloud computing play a pivotal role. Technically, web apps, as the name suggests, are applications hosted on remote servers & accessible through web browsers. On the other hand, cloud-based apps are web applications that come with advanced functionalities & elaborate compatibility.


In the realm of contemporary software development, the demand for innovative solutions is evident in the competition between web and cloud-based applications. These two platforms share similarities but diverge significantly in crucial aspects. This article will delve into the distinctions between web-based and cloud-based applications, exploring facets such as back-end infrastructure, scalability, and technical perspectives, shedding light on the nuances that developers navigate in this dynamic landscape, including the pivotal role of technologies like chatbot development.
What Is a Web Application?

A web-based app is an application designed and developed for the web browser. Unlike cloud based application development, the web app completely depends on the web server for functionality & processing. This application program is mainly stored on the remote server & delivered through a web browser interface over the internet. According to web application development company, web apps have client-server architecture & their codes are divided into 2 major components – server-side architecture & client-side architecture.

Server-side architecture: The server-side architecture or script usually deals with data processing. The web server can process a client request & send a response back. This web app architecture defines a simultaneous interaction between database instances, components, user interfaces, middleware systems, and servers.

Client-side architecture: The client-side architecture mainly deals with interface functionalities such as drop-down boxes and buttons. When a user clicks on the link, the browser will start loading the client-side script & rendering a text and graphic element for interaction.
Types of Web Apps
Nowadays, many businesses are already adopting various kinds of web-based applications because of their several advantages, features, and functionalities. 8 most popular types of web apps include:
    . Static Web Apps
Static web applications, constructed using HTML, CSS, and JavaScript, lack the flexibility of dynamic counterparts. These web based services provide content directly to users without requiring server-side modifications, resulting in simplicity and straightforward development. Key benefits of these apps include:
Very fast load time
Highly secure
Less complex to build
    . Dynamic Web Apps
This is a complex type that provides real-time data based on the server response and the user’s request. Dynamic web apps can be developed either as a conventional website with several pages and levels of navigation or as a single-page web application. They use several server-side and client-side languages to create web pages such as HTML, CSS, JavaScript, Python, PHP, Ruby, etc. Key benefits of dynamic web apps include:
Wider audience reach
Scalable in comparison to static web apps
Very flexible in terms of a new content update
    . Single Page Apps
A single page web app entirely runs on the browser & never requires browser reloading. This is actually a dynamic web app that manages all data on a single HTML page. This type of web app is faster than traditional websites as its logic is implemented in the browser directly than a server. Gmail, Netflix, Pinterest & Paypal are the best examples of single page applications. Key benefits include:
Enhanced user experience
Minimized server load
Improved app performance
    . Multiple-Page Apps
Multiple page apps are designed multiple pages separately and combined to form a website. They have different pages with static information like texts & images. Web based app development companies recommend using multiple-page apps as they offer excellent control over search engine optimization techniques. Major benefits of Multiple page apps include:
Ideal for SEO
Quick browser back or forward navigation
Simple to develop
    . Animated Web Apps
This is a type of web application that effectively supports synchronization & animation on the web platform. These applications are widely used by freelancers and creative companies to present their creativity better. Technically, JavaScript, HTML5, FLASH, and CSS are used to create animated web applications. Key benefits of AWAs include
Improved User Engagement
Enhanced Navigation
Excellent Branding
    . Web Apps with CMS
In this web application, content is updated constantly. It helps to manage, modify and create digital content with ease. WordPress is one of the best examples of CMS web applications. A variety of languages are used to create content management systems such as C#, PHP, Java, and Python. Key advantages of CMS web apps include:
Quick content creation & management
Efficient & quick updates
A vast range of features
    . E-commerce Web Apps
It’s a complicated and advanced dynamic web application that allows users to buy & sell goods electronically. These web based services encompass transaction and payment integration as key components, facilitating seamless order processing, payment acceptance, and logistical management for businesses involved in online commerce. Key benefits of these web apps include:
Scale business quickly
Offers customer insights through tracking & analytics
Sell goods across the world
    . Progressive Web Apps
Progressive web apps or PWAs are also called cross-platform web apps usually built with HTML, CSS, & JavaScript. PWAs use different features, APIs, and progressive methods to deliver a seamless experience. Progressive web apps boost the adaptability and speed of web applications. These apps are still easy to access if internet connectivity is poor. Key benefits of progressive web apps include:
Fast loading time
No installation required
Quickly respond to user interactions
Enhanced cross-platform conversion

Looking for App Development Solutions?
Take your brand up a notch with our custom mobile app development services.
Talk to an Expert

Type
Widely Used In
Advantages
Dynamic web apps
Social media
Healthcare
IT Industry
Logistics and transportations
Retail and ecommerce sectors
On-demand
Directly manage websites to update & change the information
Quick user management to protect servers & control all website users
Static web apps
Book publishing sectors
Works in offline mode
No 3rd party software installation required to access web apps
Single page apps
Email service
Communication sectors
Allows navigation & optimized routing experience
Keeps visual structure of web apps consistently through presentation logic
Multiple page apps
E-commerce sectors
Enterprise industries
Enables optimizing every page for the search engine
Allows users to access other pages
Animated web apps
Animation
Education
Gaming industries
Hold user attention for a very long time due to its attractive approach & unique design
Aspect ratios, landscape orientations, portrait, and viewing distances & different pixel densities are considered
Web apps with CMS
Blogging platforms
Sales & marketing platform
News portals
Easily organizes the web content Offers group & user functionality
Simple language support & integration
E-commerce web apps
E-commerce sectors
Allows sellers to sell products using a single platform
Helps you expand business globally & reach maximum audience
Progressive Web Apps
On-demand
Healthcare
Retail and e-commerce
Logistics and transportations
Social media
IT sectors
Responsive & Browser Compatibility Works in online & offline mode
Updates with no user interaction

Key Benefits of Web Apps
Web apps enable businesses to interact with their customers more efficiently. These applications can make it easy to track & measure data that are essential to keep business operations streamlined. Key advantages of web apps include:
Easily accessible through any kind of web browser
Runs on multiple platforms that make it cross-platform compatible
Minimizes the risk of compatibility issues
Requires less maintenance & support from the developer’s end
Helps to ease usability for the customers
Effectively eliminates hard drive space limitations
Apps can be maintained & updated without software reinstallation on several devices
Offers high scalability and flexibility
Simple to deploy, maintain, and update
The cost of routine maintenance is minimized as the data is stored on remote servers
What is a Cloud Based App?
These apps are online software programs with elements accessible via a local server and executed on the cloud environment. As internet-based software, cloud applications are stored in the remote data center & handled by cloud-service providers. These apps are used for file sharing & storage, order entry, word processing, inventory management, financial accounting, customer relationship management, data collection, etc.

According to the report, the global market size of cloud apps is projected to reach approx 168.6 billion USD by 2025. Cloud apps usually support several user requirements through customization and provide several services to meet storage, backup & security needs. Some major characteristics of cloud apps include:
Agile application
Microservices-oriented
API-backed
Continuously integrated & delivered
DevOps-enabled
Analytics-infused
User experience-centric
Types of Cloud-based Applications
Cloud apps are divided into three major cloud computing models – SaaS, PaaS, and IaaS. Each model also shows several parts of cloud computing stacks. Take a closer look at these types:
    . SaaS or Software as a Service
SaaS is one of the best cloud apps that enable users to easily access full-functioning software applications over the internet. These cloud applications are primarily designed for freelance services, large enterprises & SMBs. Some of the best examples of SaaS applications are HubSpot CRM, Wrike, MS Office 365, Sisense, Wix, etc.
    . PaaS or Platform as a Service
PaaS provides users with the infrastructure, computing platforms, and solutions to build their own applications. Platform as a Service is ideal for businesses that mainly engage in collaboration, testing, and development of cloud solutions. PaaS applications have a deployment environment including run-time system libraries, operating systems, and graphic UI. Some of the best examples of PaaS apps are Google App Engine, Microsoft Azure, Rackspace Cloud Sites, etc.
    . IaaS or Infrastructure as a Service
IaaS consists of basic building blocks that offer access to networking functionalities, features & data storage space. It enables users to outsource IT infrastructures like servers, processing, virtual machines, storage, networking & other resources. IaaS applications also offer a good level of management control and flexibility over IT resources. Some of the best examples of IaaS apps are Amazon WorkSpaces, IBM Cloud, Google Cloud, etc.
Benefits of Cloud Apps
Web based application in cloud computing boost productivity, accessibility, security, and data safety. They help businesses make the process of collaboration more effective and easier. Key benefits of cloud applications include:
Minimal service provider interaction & management effort
Provides large computing capabilities, online & offline
Provides access to information from any device or place
Offers fast access to important applications through cloud servers
The performance of the availability of cloud apps enhances profitability & streamlines workflows
Serves multiple consumers with virtual and physical needs
Provides high transparency to resource providers & consumers
Offers improved collaboration options
Web Apps Vs Cloud Apps – Key Differences
Web apps and cloud apps both come with a wide range of functionalities & have noticeable distinctions. Web-based applications usually are accessible via web browsers, whereas cloud app’s infrastructure and data aren’t only accessible through the web browser but also downloadable. So, all cloud apps are web apps with additional features. Other differences between web and cloud apps are listed below.

Parameters
Cloud apps
Web apps
Internet
Work partially or entirely without the internet connectivity
Work with the internet only
Security
Ensures high security measures for sensitive & confidential information
It can verify client info on authentic servers
Technology
It needs a back–end framework & a JavaScript-based structure like React Js, Angular, etc
It has inbuilt languages such as PHP, Python & Ruby, and databases like MySQL.
Access
It’s not dependent on the web browser
Accessed via the web browser only
Customization
Customization features improve functionalities.
Never provides customization and similar functionalities
Costs
Expensive as compared to web apps
Development cost is less than cloud apps
Types
SaaS, PaaS, IaaS, RaaS
Static web apps, dynamic web apps portal web apps, etc
Scalability
Inherently scalable
Limited scalability
Availability
High uptime
Limited uptime
Storage
Multiple replicated center
Single data center

Are You In Search of The Best App Development Company?
With top-notch development services, we develop the best software applications that meet your needs.
Book an Appointment
Final Words
Web apps and cloud apps both are continuing to deliver users as the most crucial touch point. Since they are packed with similarities and dissimilarities in terms of software architecture, storage, and other aspects, selecting the right application always depends on customer preferences, business needs, and operations. Are you planning to build a custom web application or looking for web app development services? Get in touch with our experts for complete assistance.

6772 views · 2 years ago
10 SEO Best Practices for Web Developers

You've built an amazing website, but how do you make sure people can find your site via search engines? In this article we cover 10 best practices to make sure your article not only stands out, but ranks well with search engines.

1. Take time to research keywords


To determine the best keywords for your site, you'll need to do some keyword research. This usually consists of combing through your competitors' sites for the keywords that are driving them the most traffic. There are several ways you can get started with keyword research. One recommended way is to create a spreadsheet with your competitors' sites listed and add keywords that you can copy and paste your competitors' keywords into Google's Keyword Tool and Google Webmaster Tools Keyword Analyzer tool. Analyze your competition's site's website titles to find out what keywords they are using tools such as Ahrefs, Moz, SpyFu, or SEMrush to find out what keywords others are using on your competitor's site.

2. Focus on your Title tag


This is the headline for every article. It needs to be bold and attention grabbing so it can catch the eye of potential users. Pick it somewhere around 60-90 characters to make sure it is displayed properly in search engines as well as readable in the browser tab. As you write your title, focus on the unique keywords your readers are likely to search for. Also make sure that the keywords you select are relevant to your page. Another good practice is to make the title tag and your header (h1) the same.

3. Carefully craft your H1, H2, H3 tags


Careful usage of header tags helps search engines identify keywords within your page. To get the best results from your header tags, use H1, H2, and H3 in order with keywords in your H2 and H3 headers that support your H1 tag. Remember, your H1 tag should mimic your title tag, whereas the H2 and H3 can expand and add additional context. You can also utilize multiple H2 and H3 tags, however be sure that these headers are supporting the H1 tag and relevant to the content on your page. Using irrelevant header keywords can actually work to your disadvantage.

4. Avoid loading content with JavaScript


Despite it's popularity, JavaScript is not yet well supported by search engines and can mask important content. Progressive Web Apps in particular can suffer as key content is loaded after the page is spidered, or in the case of many search engines that do not yet index JavaScript not loaded at all. This is also the case for many social media sites, meaning that content loaded dynamically is not evaluated or pulled in, resulting in the default skeleton of your site being what shows up in search engines and in link previews.

5. Carefully name images


In the past search engines would evaluate your images based on their alt tag, however as more and more developers loaded irrelevant keywords into this hidden image text search engines instead added more emphasis to the actual name of the image itself. This means using generic image names such as 1.jpg can actually hurt your site ranking as search engines might be looking for seokeywords.jpg. Now, just because you're carefully naming your images with relevant keywords describing the image doesn't mean you should ignore the alt tag. Be sure to continue to include alt tags for older search engines, in the case the image doesn't load, and for accessibility (ie screen readers).

6. Work to improve your page load time


It’s not a secret that faster sites rank higher in search engines. Most search engines use the PageSpeed Index from Google to determine the speed of websites. One thing Google looks at is how fast images are loading. For this reason, we recommend taking a look at how long it takes for the first image to load on your site or even take advantage of lazy loading for non-critical images. You want images to be loading within 30 seconds at the absolute latest, before the user can actually click on the page. You also need to make sure that if you're using multiple images that they load as one group. Next, take a look at how long it takes to load a webpage. Are pages taking longer than three seconds to load on your site? You want to have pages that load fast for users, but your code and templates can easily be causing this to happen.

7. Optimize text throughout your page


Beyond your title tag, headers, and images it's important to work keywords into your standard content, while also working to avoid overloading keywords. To help prevent overloading and increase search engine rankings across multiple keywords you can use alternative phrases. In the case of "PHP training" an alternative phrase might be "PHP tutorials" or "PHP course." This both helps support the primary keyword, while also allowing the page to rank for these keywords as well. Remember to use the tools referenced above to find the keywords that are right for your site, and then work them in to natural sentences without forcing keywords or becoming overly repetitive. Also keep in mind, just as important as the content and keywords on the page are to search engines, how users engage with that content is also critical. If your page experience's high bounce rates or low engagement with the content, it is likely to be deprioritized by search engines, meaning a page highly optimized for search engines but not humans may enjoy a higher ranking, but only for a short time before it is heavily penalized.

8. Build your Domain and Page Authority


Domain and Page Authority are determined not just by the number of back-links (or sites linking to your domain or page), but also the quality of the sites and pages linking to you. One practice that has made obtaining a better DA or PA harder has been purchasing or acquiring bulk back-links. Note this practice is actually against Google's TOS and may result in your entire site being banned from their search results! Because of this practice, it's important to focus on high quality sites and work to get back-links naturally either through partnerships or syndicated content (such as blog posts). You can also check your DA here or using one of the many tools referenced above.

9. Take advantage of social media


Speaking of back-links, social media can be a powerful tool for increasing page visibility while also improving your search engine rankings! Remember, most social sites do not support or read JavaScript, so ensure your content is available on the page. If you do have a progressive web app with JavaScript loading your content, look into using Headless Chrome to render a JavaScript free version of your site for specific bots (note - the content MUST be the same content a user would see or your site may be blocked). There are also numerous tools to allow you to build the content via JavaScript on the server backend before passing it to your readers. To help get even more exposure, consider adding social share links or tools like AddThis.

10. Good SEO takes time


The truth is that there really aren't any special secrets or ingredients to ranking well in search engines (well not that Google has publicly shared). Instead it's about properly formatting your page, making sure it's readable to search engines, and providing content that your readers will engage with. As you provide more valuable content, and more people like and link to your content - your site's Domain Authority will gradually increase, giving your site and pages more powerful - resulting in a higher ranking.
7499 views · 3 years ago
Web Sockets in PHP

In his talk Websockets in PHP, John Fransler walks us through the use of WebSockets in PHP.

While discussing bi-directional real-time application development, John notes that PHP is often not invited to the table due to its lack of native support. Of all the possible attempts to bring in PHP on this stage of real-time development, Ratchet, a PHP WebSocket library, comes closest. "Ratchet is a loosely coupled PHP library providing developers with tools to create real-time, bi-directional applications between clients and servers over WebSockets."* Ahem!

Today's dynamic world


In today's dynamic content world of the internet, it is required to serve real-time bi-directional messages between clients and servers. WebSockets are simple, full-duplex, and persistent. They work over Http and are a standard today.

WebSockets have compatibility with 96.5% of clients globally

There's a very high chance your client has the necessary plumbing to access your content via WebSockets. WebSockets gives the ability to have real-time data on to your clients without the need for polling.

To understand WebSockets, John takes an example of a Javascript client and Ratchet Server. Javascript has everything built in to allow access to a socket. For example, you can use the send method on a WebSocket variable to send a message to the server, or if you want to respond to a message from the server, you use the OnConnection method.

While on the Server, John uses Ratchet, which is built on React PHP. A server script is then configured and set up to run and listen on a port for incoming HTTP requests. For messages, JSON is used, and to find public methods, a router is set up. He then goes on to instantiate the server-side script in Ratchet.

There are four functions of a Ratchets message component interface that are used in this example:

OnOpen gets called when a new connection is made.

OnClose gets called when a client quits. It's essential to keep an eye on memory management, and essential to keep tidying up as you move through the code.

OnError gets called when there is an exception faced by the user.

OnMessage gives the text of the JSON message, which is being exchanged with the client.

For Initialization, Jason continues to walk through the example. He shows how one can loop through the clients, both inside the server and outside the server. Outside the server, it’s a feature of React PHP. On database access, and with traditional standard synchronous MySQL in PHP, what usually happens is that it forces the code to wait for the query to return a result and do nothing — Fortunately, with Asynchronous MySQLi, that is not the case.

John gets into the details explaining Variables, References & Pointers. He also gives a demo where a central site has updated information on the Bitcoin and ether prices. A client terminal reflects the last values. Now the client doesn't have to poll the server for new values. When there is a change in the Bitcoin or ether values, the server pushes down the client's update. No polling helps with a lot of overheads and gets closer to real-time.

Using Supervisord


For Long-running applications - Jason recommends running a supervisord, use proxy to expose the port, and add a site certificate. Supervisord keeps an eye out for the server running the service; it can be used to restart the service and log any service issues. Recommended proxies are AWS load balancer, Nginx, and HA Proxy. For scalability, use multiple smaller WebSocket servers and a smaller number of clients per server used and load balancing. If one has to support a chat feature to allow clients to talk to each other in near real-time, it is recommended to use Redis. The Redis server proxies the messages between the server nodes.

The talk concludes with John summarizing best practices on error handling and takes QnA on various aspects of WebSockets such as handling load balancers and asynchronous calls to MSQLi.

The presentation for this video, along with the code, is hosted at John Curt's GitHub. More info about John's current areas of interest can be found on John's Blog.

Watch the video now


Related videos
8401 views · 3 years ago
Laravel Eloquent Relationship Part 2

As you all know, Laravel Eloquent Relationships are powerful and easy methods introduced by Laravel for helping developers to reduce the complexity when connecting with multiple tables. While connecting with multiple tables, this method is very easy for developers for creating the application

Here you can see the next three methods of the eloquent relationships:
   
. Has Many Through Relationship
    . One to Many Polymorphic
    . Many to many Polymorphic

HAS MANY THROUGH ELOQUENT RELATIONSHIP

Has many through is a little bit complicated while understanding. I will provide a shortcut method to provide access data of another mode relationship. We will create a user table, post table, and country table and they will be interconnected with each other.

Here we will see Many through relationship will use hasManyThrough() for the relation


Create Migrations


Users table

 Schema::create('users', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->string('email')->unique();

$table->string('password');

$table->integer('country_id')->unsigned();

$table->rememberToken();

$table->timestamps();

$table->foreign('country_id')->references('id')->on('countries')

->onDelete('cascade');

});


Posts table

Schema::create('posts', function (Blueprint $table) {

$table->increments('id');

$table->string("name");

$table->integer('user_id')->unsigned();

$table->timestamps();

$table->foreign('user_id')->references('id')->on('users')

->onDelete('cascade');

});


Countries table

Schema::create('countries', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->timestamps();

});


Create Models


Country Model

<?php


namespace App;

use Illuminate\Database\Eloquent\Model;


class Country extends Model

{

public function posts(){

return $this->hasManyThrough(

Post::class,

User::class,

'country_id',
'user_id',
'id',
'id'
);

}

}


Now we can retrieve records by

$country = Country::find(1); 

dd($country->posts);


ONE TO MANY POLYMORPHIC RELATIONSHIP

One to many polymorphic relationships used one model belongs to another model on a single file. For example, we will have tweets and blogs, both having the comment system. So we need to add the comments. Then we can manage both in a single table


Here we will use sync with a pivot table, create records, get all data, delete, update, and everything related to one too many relationships.

Now I will show one too many polymorphic will use morphMany() and morphTo() for relation.


Create Migrations

Posts table

Schema::create('posts', function (Blueprint $table) {

$table->increments('id');

$table->string("name");

$table->timestamps();

});

Videos Table

Schema::create('videos', function (Blueprint $table) {

$table->increments('id');

$table->string("name");

$table->timestamps();

});

Comments Table

Schema::create('comments', function (Blueprint $table) {

$table->increments('id');

$table->string("body");

$table->integer('commentable_id');

$table->string("commentable_type");

$table->timestamps();

});


Create Models

Post Model

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;


class Post extends Model

{



public function comments(){

return $this->morphMany(Comment::class, 'commentable');

}

}

Video Model

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;


class Video extends Model{



public function comments(){

return $this->morphMany(Comment::class, 'commentable');

}

}

Comment Model

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Comment extends Model{



public function commentable(){

return $this->morphTo();

}

}


Create Records


$post = Post::find(1); 

$comment = new Comment;

$comment->body = "Hi Harikrishnan";

$post->comments()->save($comment);


$video = Video::find(1);

$comment = new Comment;

$comment->body = "Hi Harikrishnan";

$video->comments()->save($comment);



Now we can retrieve records


$post = Post::find(1); 

dd($post->comments);



$video = Video::find(1);

dd($video->comments);



MANY TO MANY POLYMORPHIC RELATIONSHIPS

Many to many polymorphic is also a little bit complicated like above. If we have a tweet, video and tag table, we need to connect each table like every tweet and video will have multiple persons to tag. And for each and every tag there will be multiple tweet or videos.

Here we can understand the creating of many to many polymorphic relationships, with a foreign key schema of one to many relationships, use sync with a pivot table, create records, attach records, get all records, delete, update, where condition and etc..


Here morphToMany() and morphedByMany() will be used for many to many polymorphic relationships

Creating Migrations

Posts Table

Schema::create('posts', function (Blueprint $table) {

$table->increments('id');

$table->string("name");

$table->timestamps();

});

Videos Table

Schema::create('videos', function (Blueprint $table) {

$table->increments('id');

$table->string("name");

$table->timestamps();

});

Tags table

Schema::create('tags', function (Blueprint $table) {

$table->increments('id');

$table->string("name");

$table->timestamps();

});

Taggables table

Schema::create('taggables', function (Blueprint $table) {

$table->integer("tag_id");

$table->integer("taggable_id");

$table->string("taggable_type");

});


Creating ModelsPost Model


<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{



public function tags(){

return $this->morphToMany(Tag::class, 'taggable');

}

}


Video Model

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Video extends Model

{



public function tags(){

return $this->morphToMany(Tag::class, 'taggable');

}

}

Tag Model

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Tag extends Model

{



public function posts(){

return $this->morphedByMany(Post::class, 'taggable');

}





public function videos(){

return $this->morphedByMany(Video::class, 'taggable');

}

}

Creating Records

$post = Post::find(1); 
$tag = new Tag;
$tag->name = "Hi Harikrishnan";
$post->tags()->save($tag);


$video = Video::find(1);
$tag = new Tag;
$tag->name = "Vishnu";
$video->tags()->save($tag);


$post = Post::find(1);
$tag1 = new Tag;
$tag1->name = "Kerala Blasters";
$tag2 = new Tag;
$tag2->name = "Manajapadda";
$post->tags()->saveMany([$tag1, $tag2]);


$video = Video::find(1);
$tag1 = new Tag;
$tag1->name = "Kerala Blasters";
$tag2 = new Tag;
$tag2->name = "Manajappada";
$video->tags()->saveMany([$tag1, $tag2]);


$post = Post::find(1);
$tag1 = Tag::find(3);
$tag2 = Tag::find(4);
$post->tags()->attach([$tag1->id, $tag2->id]);


$video = Video::find(1);
$tag1 = Tag::find(3);
$tag2 = Tag::find(4);
$video->tags()->attach([$tag1->id, $tag2->id]);


$post = Post::find(1);
$tag1 = Tag::find(3);
$tag2 = Tag::find(4);
$post->tags()->sync([$tag1->id, $tag2->id]);


$video = Video::find(1);
$tag1 = Tag::find(3);
$tag2 = Tag::find(4);
$video->tags()->sync([$tag1->id, $tag2->id]);



Now we can retrieve records

$post = Post::find(1); 
dd($post->tags);


$video = Video::find(1);
dd($video->tags)


$tag = Tag::find(1);
dd($tag->posts);


$tag = Tag::find(1);
dd($tag->videos);



Hence we completed all the relationships. In the above blog how has many through relationship, one to many polymorphic relationships and many to many polymorphic are working. This feature is introduced from Laravel 5.0 onwards and till the current version. Without the model, we can’t able to do this relationship. If we are using an eloquent relationship it will be very useful while developing an application.
8785 views · 3 years ago


Welcome back! If you’re new to this series have a look at Part 1 here


Today’s focus is on templating, the aesthetic that will make or break your web application.

Having a clean design with well defined CSS that’s responsive and user friendly goes a long way.

Developers often stick to their lane but delving into templating will bode in your favor, you can indeed
create a functional and launch-worthy application all on your own!

Let’s jump into it!

Structured structure


Everything you tackle should be found with ease down the line. Therefore careful planning is fundamental to the success and sustainability of your project. You’ll also find that clearly defining your work lends itself to more productivity overall as you spend less that explaining your work during a handover / looking for a specific piece of code or resource. You’ll probably end up spending more time on actual work.
Finding your own unique pattern with file structure and CSS identifiers will also work in your favor as something unique to your process will most likely be easier to remember and form a tactile relationship with.

Our project’s current structure looks like this:



>If you need to backtrack, Part 1 is a great place to start!

In part 1, we created our index.php which displays info from our database.

Let’s take this a step further and create a header and a footer for our index.php

Create a file called header.php and save this to your includes folder.

Next, create a file called footer.php and save this to your includes folder.

Your file structure should now look like this.



A header above all the rest


The header file will be a file we reuse throughout your web application. This file will contain important information that’s vital to the functionality and aesthetic of your website.
The type of info you’ll expect to see in a header.php file:
Script includes
Such as JQuery and important libraries
CSS includes
CSS files loaded from internal or external sources
Meta information
Contains important information that’s readable by search engines.
The basic structure of the beginning of your app, including your menu, and your logo.
For now, how header is going to have a basic layout.

Let’s get our HTML on!

<html>
<head>
<title>My Awesome CMS – Page Title</title>
</head>
<body>


A footer that sets the bar

Create a file called footer.php and save it to your includes folder (yourcms/includes/footer.php).

Add this code to your new file.

</body>
</html>


Next, let’s focus on the gravy… The CSS


CSS, when written beautifully, can truly set you apart.

You can tell your web application to load various styles to specific elements by defining unique identifiers.
Styles that are only used once are denoted with a # (a CSS “ID”) whereas styles that are reused multiple times are denoted with a . (a CSS “class”)

The best way to delve into the realm of CSS is to learn by experience.

Let’s create!


First, we need to create and load our CSS file. Remember our nifty new pal header.php? This created a convenient way to load our CSS file!

Add the following code to your header.php just above the </head> tag.

<link href=”../assets/css/style.css” type=”text/css” rel=”stylesheet”/> 


The ../ in the link to our stylesheet means we have to leave the current directory (the directory that header.php is in) and look for the assets/css/ directories.

Go ahead and create the css folder under your assets folder.

Next we’re going to create some simple CSS to test things out.

It’s time to add some style!


We are going to create two divs.
A div is a divider / section in HTML.
Add this to your index.php (located in your CMS’ root folder) above the <?php tag.

<div id="myfirstid"></div>
<div class="myfirstclass"></div>
<div class="myfirstclass"></div>
<div class="myfirstclass"></div>
<div class="myfirstclass"></div>
<div class="myfirstclass"></div>


Then, create a CSS file

Add this:

#myfirstid{
Background:lightblue;
Font-family:Arial;
Font-size:44px;
Font-weight: Bold;
}
.myfirstclass{
Font-size:15px;
Color: darkblue;
}


Save your newly created CSS to assets/css/ as style.css.

Pulling it all together, let’s see what we can do!


Let’s apply what we just learned to our index.php. But first, we should add our header.php and footer.php files.

Including everyone


Add this to the top of your index.php file:

include(‘includes/header.php’);


Remove the <divs> we used for practice earlier, we have something better in store!

Add this to the bottom of your index.php:

include(‘includes/footer.php’);


Next, let’s modify our code so we can add some style to the data we retrieve from our database.

Modify the following line:
foreach($getmydata as $mydata){ echo "Title: "; echo $mydata['title']; echo "<br/>"; echo "Content: "; echo $mydata['content']; echo "<br/>"; echo "Author: "; echo $mydata['author']; echo "<br/>"; echo "<br/>";


as follows:
?>

<div id=”myfirstid”>
<?php
foreach($getmydata as $mydata){
echo "<div class=”myfirstclass”>Title: ";
echo $mydata['title'];
echo "<br/>";
echo "Content: ";
echo $mydata['content'];
echo "<br/>";
echo "Author: ";
echo $mydata['author'];
echo "</div><br/><br/>";
}?>
</div>
<?php


Your full index.php should now look like this:

<?php
include('includes/header.php');
include('includes/conn.php');

if ($letsconnect -> connect_errno) { echo "Error " . $letsconnect -> connect_error;

}else{

$getmydata=$letsconnect -> query("SELECT * FROM content");

?>
<div id="myfirstid">
<?php
foreach($getmydata as $mydata){
echo "<div class=”myfirstclass”>Title: ";
echo $mydata['title'];
echo "<br/>";
echo "Content: ";
echo $mydata['content'];
echo "<br/>";
echo "Author: ";
echo $mydata['author'];
echo "</div><br/><br/>";
}
?>
</div>
<?php
}

$letsconnect -> close();
include('includes/footer.php');
?>


Go ahead, test it out!

There’s a lot to unpack and I will break things down a little more during our next tutorial!

Challenge


Study the final index.php and try to form a few theories about why closing a php tag is necessary before adding raw html.

Next Up: #CodeWithMe Part 4: Building A Good Base

SPONSORS

PHP Tutorials and Videos