I want to Create a Materialized Frontend WebPage with a Navbar having static Searchbar placed inside it in the center. Just like in ecommerce websites like flipkart and snapdeal etc. what is the best way to do it using materialize.css???
Related
I have a svelte application, I have separated the backend from the frontend by making two different directories the backend is the express application and the frontend is the svelte app. I fetch the data from the express server when it is needed. I need an admin dashboard where I can control things but the problem I am getting is that I don't want to display the static HTML and the svelte files that are supposed to be on the admin page.
Now if I go to the browsers dev tools I can see the components that are displayed on the admin page and the code inside those components. Of course, the user can't access the sensitive data that is stored on the express server, but still, I would like to keep the admin page completely hidden.
I can fix this by making a get route on the server side and running a middleware in between that checks that the user is admin and then just renders the HTML, but the admin page needs to have a lot of functionality so I need to use svelte.
Image from the browsers dev tools
I found an answer! I was using the <a> html tag to navigate to the admin page and the data was preloaded for some reason. In my launched app I don't need to navigate to the admin page using the <a> tag.
How to reload the page without reload partials in node js. I am creating a web application using node js, bootstrap, mongodb and handlebars. In my partial navbar the active class and js code for changing it into clicked component. when I render a page inside this the whole document is reloading and active class changing is uneffective in this case. I think it will be fixed with avoid reloading partials. There is any way to avoid reloading partials when page rendered.
I'm working on assumptions here as you haven't posted any code, I assume that:
You are using Handlebars to render the partials on your Server? (not on the client)
You have setup separate routes on NodeJS (are you using express?) so each route serves a different page, e.g. "/Index", "/About", "/Privacy", "/Contact" etc.
If my assumptions are true, each route on your server is providing an entire web page. It must re-load the partial because the client expects a complete html page for that route, and whenever the client changes route the server must provide a new page; if it didn't reload the partial then your navbar would be missing.
If you want a more seamless experience where the navbar stays there and you can modify its state, and only the remainder of the page reloads, you ought to try the Single Page Application approach. Frameworks such as Angular, React, VueJS or Svelte are designed with this approach in mind. Your routing and page templating is done client-side rather than server-side, but you can use a combination of both (I use Handlebars and VueJS)
i have 2 different layouts in express js , I store all navigation maues in database tables now i have to load menus according to layout e.g home , about, contact for front end layout and dashboard,manage ,ticket for admin Panel in my website.
i stuck on which event or route i have to use for load it.
Hello I have just started learning how to use reactJS I am using the following example https://github.com/pgte/pouch-websocket-sync-example#readme
my first goal is to have a template like the following Design Objective
I am not asking for a solution however I would like to be pointed in the right direction's
how to include bootstrap based templates (and custom style sheets) In react and apply these styles to html elements inside a react component
also how can I use multiple components and their Functions in a single page ?
i'm still slightly confused about react
here is my target objective's
admin template with everything render server side with react <- this will be only the frontend and all data will be stored server side like the example.
all changes will be synced . I aim to use Nodejs or python tornado as server side api's
and include the grid based view with the rows being items from the mongodb or pouchdb store , each item once clicked will render a overlay with a table of TODO tasks , for example the grid could contain staff members and the todo list will be tasks for the staff member to complete
this question is mainly about the design
I have recently started learning React and am trying to make a simple blogging app. I store the data (post content, comments etc.) in MongoDB and would like to render the content according to the route, such as, when I have a certain URL (like /blog/:username), I'd pull data from the database and then render a view with the data content.
Using Express, I am now using static html files ( express.static) as the view, yet this makes it impossible to render the content according to the requested route, such as:
/blog/:username/:article
It is possible with a template engine, like Jade, but Jade, as far as I know, does not work with React.
What is the correct way to make dynamic views using React while preserving the URL route structure?
Thank you
Generally speaking, there are several ways to achieve your goal. I'll sketch the one that I feel is the most natural approach when using React:
Create your blogging app with React
Use a frontend routing mechanism such as react-router to make React aware of the URL
Either fetch the data for each blog entry from the backend via an Ajax call each time the user hits a URL, or store the blog entry data in the frontend (e.g. using something like redux) and reuse it when required.
Does this make sense? If not, please keep asking...