How to create multiple Html subpages without writing redundant code? - javascript

everyone currently I am working on a project which a Financial web application. But as I'm moving forward code redundancy is increasing & particularly for HTML code.
I have multiple Html pages on my website such as Dashboard, EditProfile, AccountStatistics, etc. For Eg.
DashBorad - enter image description here
EditProfile - enter image description here
AccountStats - enter image description here
Now judging from the above pics you guys can see every time we navigate from one page to another only the main section content is changing but the body structure & design of the website remains the same.
Problem: If i want to create a new page I have to include code for header, sub-header, sideBar, footer which is repetitive. I just want the main-section code to change. For eg - Made one file like Body.html which contains code for header, sidebar, etc & every time I want to create a new page then only code for the main-section has to written which be can later merge with the body.
How can we achieve this?
(Tech used - Html, Css & JavaScript)
Note: I can also attach code if anyone wants more clear understanding!
Thank You!
Cheers to coding :)

You can use Frontend Frameworks like React/Vue.
Depending on if it's a static site, you can use stuff like Jekyl/Hugo.
If you want to go the SSR way, then you have Angular Universal/ ASP.NET Core/ PHP way.
Depending on your use case, you can't really go wrong either way. If you're new, pick either one and get started Learning.
Have fun!

This is an excellent use-case for a library like ReactJS (and other similar alternatives). Using React you can define 'components' for your header, sidebar and other common parts of your webpages that can be reused in different places. You can also update each of these components separately.

Related

Can I nest an web app in another web app?

At the moment, I need to create an app that will dynamically change it's sections
This is the app layout.
The main section would be an independent webapp, because it would keep changing it's contents.
The nav bar it's basically a set of images that work as buttons and change the contents of the main section.
The side bar have some parallel uses, but it can work with the "main webapp" (the one that contains all sections
That's why I think having a nested webapp would be the best solution. I tried google site but since I can't really control it I dropped the idea.
But it's possibly to achieve that? At the moment the app need to refresh the whole page to apply even the smallest HTML change
Im a little confused, You could have that part dynamically generate information in the main section and everything else be static.
And the web app will update anytime you change the code weather its a small html changes or logic changes. unless its deployed and you dont have sync on, then you need to manually sync it to show the changes.
Update:
I solved my issue stacking divs and changing the active one by hiding the others.
I also using an include with my templates, in a way I can split my HTML code in a main template.
I use two types of includes:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
And
function includeTemplate(template) {
return HtmlService.createTemplateFromFile(template).evaluate().getContent();
}
one used to include static HTML and other dinamic HTML (templates)

How to create a gallery page that can be used for multiple projects?

I will try to keep this short.
What am I making?
I want to create galleries for multiple projects. A gallery is opened as a new page by clicking on a project's thumbnail on the main page. Each gallery should have the same layout, just a different title, text and images.
How do I want to make it?
I could make multiple pages for each gallery, but I ideally want a single page of which the content is adjusted to the corresponding project. This should make it easy to adjust the layout for every gallery and add more galleries in the future.
I was thinking of something like this:
index.html
$project1Title = "Project 1";
$project2Title = "Project 2";
Project1Thumbnail
(Clicking this should: gallery.html>$projectTitle=$project1Title, etc.)
Project2Thumbnail
(Clicking this should: gallery.html>$projectTitle=$project2Title, etc.)
gallery.html
<h1>$projectTitle</h1>
<h2>$projectText</h2>
<ul>$projectImages</ul>
I know I didn't use correct syntaxes, it is just a simple example.
What did I try?
I tried to use php and javascript to pass variables from the main page to the gallery page, but my knowledge with these languages is not very sufficient.
So...
What are your suggestions on how to go about this? Creating multiple pages that take the layout from a single css file, creating a single page that takes the content from variables, or something else?
I hope everything is clear, please let me know if it is not.
Thanks in advance!
the easiest way is to maximize the use of your database by storing gallery details and retrieving it using sql queries and eventually displaying it on your dynamic page (gallery). Generally database can store different kinds of data with different kinds of format such as file path.
instead of passing "$project1Title = "Project 1";" title use a proper variable that can be used by your database such as id.

How to stop angular merging different pages to make them look the same?

I have a chat website using node js and angular, and I have made the login/signup and chat page using these. but the problem is, whenever I load the chat page it uses the style from the other pages, and basically acts like a different section of the same page, It also merges the login/signup together, which is ok, because they have the same style just different number of form boxes, I want to stop angular from merging the styles from the login/signup with the chat and have it use its own style.
All help would be very much apreciated, thanks in advance.
And as far as I have been told and know, there is nothing in my own code that is preventing this, it is only angular itself. strong textBy the way, As far as I know, certain things the body of the different pages cant be individually styled, and If I were to merge html's it would take a while and research and I dont really want to do so.
The idea of loading pages as partials is not loading its css and js files etc.
You need to have only one file as index.html and inside,
define <ui-view> tag this is where you have to load all your partials to, but not an entire page, having html tags and everything.
Take a look at this pattern to load all your partials into one file.
and then,
I highly recommend you check this web site out to set nodejs to set all the missing routes to your html file as well as defining your "/css", "/js" etc.
I have just merged these two working methods to make a very concrete restful application structure.
All you have to do to avoid this problem is to write your css with starting parent class. In this way your css will work only if you have parent element with specific class.
.signIn .button {
}
.chat .button {
}
Write it like this and the button in different elements will have different style

Having same <div> on all my sites

I want to create a site like any other. I want the "thing" at the top (home downloads and stuff) to be on all my pages. Do I need to copy and paste the same code over and over again?
put the common part in your header/some specific file and use ,since you will be using header/some specific file on all pages so the desired content will also be loaded.
Learn Psd to html conversion For batter understanding the divs and styles modification and customization.. your divs and tags can be easily maintained with your stylesheet by giving id and classes you can also give one dive multiple classes and ids,
you are talking about master page i think
that is one in style and in that page you're showing other page, likely we can say one template page and many functionality see this and
see this
As far as I'm concerned pretty much all the intelligent options for solving this problem are mentioned in this question
Use a server-side template (e.g.php), use a client-side template (e.g. handlebars), use javascript, or you could use a static site generator like Jekyll.

Single page web app basic logic

I'm creating a small web application.
The application have several screens (list, inner list, item details, etc.).
I have a REST API on the server and I need to create the client.
At start I thought about HTML page for each main screen.
For every page I have a CSS and JS code.
The HTML will include only place holders (empty divs) that wwill be filled by the JS code.
Then I've decided to a create the application as single page application and using the URL with anchors to imply the state (domain.com/#list1#item1).
I've found this question to be informative about the architecture of the application, but I wonder:
1) How can I server the right CSS to the page in a clean way?
2) How can I define the page basic structure (the way the HTML divs do) in a clean way?
Unless your css is drastically different from one page to the next it should probably be in one page anyway. You will have a base css file that gets served up to every page and then page specific css files as needed for each pages. The idea is to reduce page loading overhead, but in your case it sounds like it is pretty small so putting everything in one css file shouldn't have too big of an impact.
As for page structure, start by just doing a rough drawing of each page on paper and then pencil in the divs. Then see how things overlap and what can be the master page layout elements and what are the actual page layout elements. then look at the common pieces to decide how to set up your divs.
To be honest, trying to do everything in one page, the layout of the divs is going to be a little bit messy at best. Unless it is related functionality like the steps of a wizard or something similar, putting it all in one page may cause down the road problems if you try to add or change things.

Categories