Member Avatar for ghosh22

Hi I am a beginner programmer and I am really interested about learning new skills. So I need your help. I have a question regarding designing. I want to design a website where the user will be first shown couple of example page designs/template and then the user chooses one of it. Then the user will be asked to give his inputs in a form. After this, when the user presses the Submit button, the details of the form will be automatically written in that chosen example page using the user details. How can this be done? Which languages should be used to do it easily-JavaScript/HTML/PHP or anything else?
Also I wanted to know that the form will have two optional fields (drop-down list) where the user can choose his font style and size. The output will be written dynamically using those size and style. How can this be accomplished? I am not looking for a code here. But I appreciate if you guide me to choose a correct path to do it. Thanks
P.S Also please check the attached PDF file/template to see one of the example files. The formatting of the PDF will be same but the text will be changed according to the user input.

example_formatting.pdf (88.05 KB)
Edited by ghosh22
  • 6 Contributors
  • 6 Replies
  • 309 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

A pragmatic way to approach this is to split the feature into two focused flows: a browser preview for instant feedback and a server-side finalizer that produces the definitive file (HTML or PDF) that preserves the attached PDF’s layout. That keeps the interactive parts fast and lets the server handle exact formatting, font embedding and file generation. This follows the practical direction given by and the “break it into small pieces” point from .

Keep templates as HTML files with simple placeholders (for example {{first_name}}). When a template is selected, load it into a preview container and replace placeholders with the form values, then apply the chosen font and size via CSS on that container so the preview matches user choices. A tiny illustrative snippet:

// simple placeholder render (illustrative only — escape inputs in production)
function escapeHtml(s){ return s.replace(/[&<>"']/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c]); }
function renderTemplate(html, data){
  return html.replace(/\{\{(\w+)\}\}/g, (_,k)=> escapeHtml(String(data[k]||'')));
}

On submit, send the template id plus field values to the server. The server loads the canonical template, performs server-side replacements (again escaping and validating), enforces a font/size whitelist, then either returns HTML or converts to PDF. For PDF output, common approaches are HTML->PDF converters (dompdf, mPDF, TCPDF) or filling a PDF form/template if an exact 1:1 match is required. Embed or serve the chosen fonts from the server so the PDF renders consistently.

Important cautions: always escape user input, limit text length and allowed fonts to prevent layout breakage or injections, and test the workflow with real content. Build iteratively—preview first, then server replacement, then PDF—and the forum will be most useful for specific, reproducible issues as suggested by , and .

Recommended Answers

All 6 Replies

Member Avatar for vjproduction

One lesson I learned and experienced from "both sides" is that you should avoid to ask difficult questions - difficult in term of how much effort is required from people who could help you.

My advice is that you get into HTML / CSS (basics), javascript / jquery (actions, effects, cookies) and AJAX / PHP (databases - for anything which should be "remembered" by the site).
With this combination you can achieve almost anything you want.

Things that you need to accomplish break down into small pieces, use google and when you need - ask as much as you can straight-forward and simple questions.

best of luck :)

Member Avatar for ghosh22

Thanks for your reply.

But still looking for more replies regarding this specific task from other experienced forum members..

Member Avatar for ObSys

ghosh22, What vjproduction is saying, is that the problem that you have posted is long and complex, and you haven't actually made a start yourself. This forum is designed for smaller, more specific problems. You have posted a specification for a project and are expecting experienced web designers to do the heavy lifting.

VJ's post gives you good areas to look at so that you are able to make a start. Then once you reach a sticking point with a piece of code, use this forum to get advice..

Hope this was helpful

Member Avatar for johmny

you should have to perfect in html5, css3, jquery, parallex scrolling, responsive design and php also.

Member Avatar for NetJunkie

You can acomplish everything you need to do using HTML5, CSS3 and PHP.

Member Avatar for Member #120589

Which languages should be used to do it easily-JavaScript/HTML/PHP or anything else?

Heh heh. Yes the languages can cope with it easily, but can you code/write in those languages/markup easily is the question. Did you want confirmation that it could be done easily? Well, I suppose the answer is 'Yes'. If you're asking whether it can be done easily by you (I'm assuming a beginner), then probably 'No'.

That's not being rude, just a pointer to learn the languages and markup well, then you'll be up for most things.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.