Editing content of webpage

Here is my user story

  • Website will have admin login

  • Using admin login
    user will have access to edit parts of webpage and upload file contents to the website

How should I go about in implementing these user stories. Like is there npm that I can use for authentication. How will be admin able to edit the webpage and upload those contents? what should I learn for implementing this user story?

Thanks for your replay in advance. Good Day :slight_smile:

I am no expert on this, but I am working on the last certificate here where do a lot of “authenticated user” types stuff. The passport and passport-local middleware should take care of your login issues, fairly easily. I’m working on the assumption that you’re doing node.

Uploading files should be pretty straight forward. Editing files gets a little weird. There are some editing things on NPMJS that I see. But I would probably want them to edit the files locally, using their own editor, then upload the files when done.

Again, this is beyond my expertise, but since no one else has answered yet, I thought I’d give it a shot.

That is what I would recommend learning. But of course there is a lot of supporting techs you’ll have to learn like express and sessions, mongo/mongoose.

Have you done backend yet? The backend cert on FCC will actually get you going on a lot of the basics needed.

Thanks for taking your time to replay. I’ll have a look at these.

No I’m currently at Front-End Intermediate Algorithms

I’m thinking of starting back-end simultaneously. Now will be good time :slight_smile:

Keep in mind that the backend section assumes a strong understanding of JavaScript.

For a client’s website, I created a special page on his site and which serves as an admin section. I created a template page for each page on his site and there are multiple sections on each page where he can edit the text with the ability do some simple formatting like bolding text, changing font-size, and adding hyperlinks.

I used an MySQLdatabase with two tables (pages_tbl, sections_tbl) which are linked. When he logs into the admin section of his site, he can select a page which display a form textarea element for each editable section of the editable page. Each form textarea will display the latest database record which can be edited. The client can click a Save button and the section records for the specific page are saved in the database.

Like @ksjazzguitar mentioned, you will need a backend framework to interact take the data from the client and save it into a database for future use. I made my own from scratch using MySQL and PHP, but there are JavaScript libraries/frameworks which will simplify the process.

Thanks That’s actually the exact same thing I’m looking forward to implement. :sunglasses:

So while displaying it will fetched back and displayed to other users as well ?

Until now I have learnt only js.

I heard that there are lot of node frameworks/npm modules which will simplify the process of doing so?

That is correct. I did not explain that detail. On the actual page which displays to the public, a query is made to the database to retrieve the page sections and then inserts them into the page html. With my solution, there is no JavaScript used, because the html is generated on the backend and then loaded into the page when it is displayed.

Now that I have learned how to use JavaScript (specifically AJAX calls), at some point I plan to rewrite my code to make the queries to the database and receive the data back from in JSON format where I can display the sections text via JavaScript. I could still use my PHP to create the JSON or when once I learn Node and Express, I will try implement a full-stack in JavaScript only.

1 Like