Author Topic: nettalk and website template (Read 3893 times)

ntnewbies · « **on:** February 01, 2021, 08:43:29 PM »

hi friends,
some of my customers request a design template or one page template to be merged with nettalk.

thus, in order to do that, i am thinking in theory to do the following:
a) put the html codes of <head> into pageheader
b) put the <body> codes into a netwebpage
c) put the footer codes into a pagefooter
d) i have product database. In order to incorporate that, i need to call a source procedure from netwebpage and loop the product file and generate the html code inside the <body>

i guess some of you have done this before. as such, i am seeking for your kind advice on this matter.
is my approach correct?
is there any better way to do?

kindly advice. thanks.

regards,
Jason
nt11.50
c11

DonRidley · « **Reply #1 on:** February 02, 2021, 05:46:31 AM »

Assuming all of the content is being served by a NetTalk web server, I would suggest you take a look at:

https://www.capesoft.com/docs/NetTalk12/NetTalkWebBasic.htm#Tags

ntnewbies · « **Reply #2 on:** February 02, 2021, 09:51:19 PM »

thanks don for the additional helpful info about tags.
yes, it is entirely served in webserver.

i have checked the pages(47) nettalk example. the approach is to put tags inside a html page.

however, upon my search on nettalkcentral, i understand that it would be a better approach to incorporate html code inside nettalk web server program.

thus, is there any nettalk examples for such approach?

jason
nt11.50
c11

Bruce · « **Reply #3 on:** February 03, 2021, 05:45:02 AM »

Hi Jason,

>> some of my customers request a design template or one page template to be merged with nettalk.

I think you need to explain what you mean here. As in what are they really trying to do?
Create "static" pages on your server? or embed browses and forms etc?

cheers
Bruce

JohanR · « **Reply #4 on:** February 03, 2021, 06:07:00 AM »

Hi Jason

Not sure I am the sharpest knife in the drawer to give NTWS advice, I dabble in my sparetime.

I use a similar approach and have attached 3 screenshots showing 3 procedures.

The header and footer are included, and should show all the info you need there.
I create 2 procedures, one for the header and one for the footer
Each points to an HTML file on disk containing the header or footer HTML
TVCHeader
TVCFooter

Then the bit in the middle can either be a static page, check the static procedure attachment.
or it can be a nettalk procedure (browse or form) which is then wrapped inside the TVCHeader and TVCFooter
Check the webserver attachment, where you setup generic header and footer for each procedure.

This is an extremely rough explanation, but should give you an idea of how I approached it.
My header , also has a embedded Nettalk procedure, which generates the HTML menu structure.
The menu items are included or excluded depending on logged in status, text is displayed etc.

There are lots of ways to solve the problem I am sure

regards

Johan

ntnewbies · « **Reply #5 on:** February 03, 2021, 07:01:57 PM »

Hi Johan,
thank you very much for your effort and time for producing those screenshots for me.
Yes, i followed exactly the way you did and i could produce the page successfully.
the part that i am stuck is at the <body> where i need to include a nettalk forms. the form breaks if i dont call redmond theme.css

but if i call redmond theme.css, then the html page responsive menu breaks at smaller screen.

this indicates that i have to choose website templates that clash less with nettalk themes and css.
based on your experience, what type of templates that i should look for to reduce disturbance to nettalk themes?

regards,
Jason
c11
nt11.50

ntnewbies · « **Reply #6 on:** February 03, 2021, 07:26:17 PM »

hi bruce,
i want to provide some "default design template" for customers to choose. As such, i pick some website templates online and trying to fine tune it (creating netwebpage to put html head, body and footer under xhtml like johan screenshot) so that it can merge well with nettalk. When i say merge, it means i need to include nettalk browse and form inside body of the website templates that i choose, customise the menu items and link the contact form of the html to the database.

the problem that i am facing now is the clash of nettalk themes, css with the template css that i pick. Currently i am using redmond theme for my nettalk webserver application.

Quote from: Bruce on February 03, 2021, 05:45:02 AM

Hi Jason,

>> some of my customers request a design template or one page template to be merged with nettalk.

I think you need to explain what you mean here. As in what are they really trying to do?
Create "static" pages on your server? or embed browses and forms etc?

cheers
Bruce

JohanR · « **Reply #7 on:** February 03, 2021, 11:00:16 PM »

Hi Jason,

It does get quite bit more complicated as you're trying to get 2 different systems to co-exist.

I am a complete CSS amateur, and I will never be able to create or tweak the CSS to look like a pro designed site.

So the idea was to purchase 3rd party template and use the pro layout with NTWS generating the HTML and driving the functionality.

I started this many years ago and a lot has changed in NTWS since then to make it easier and also the built in responsiveness has improved enormously.

eg.
The DIV layout came into NTWS after I started with this way of doing it and I see now the FLEXBOX has been added.
Not all fields had the ability to specify CSS on row level.
So the changes in the way NTWS generates the HTML has an effect on the output and the way the HTML is structured.

A 3rd part template has structed the HTML in a certain way and NTWS will generate it in a certain way.
So even if you specify the CSS at places quite difficult to get the same effect.

Perhaps it could also be the 3rd party template I chose.
There was an example not so long ago of someone who integrated an Admin template to great effect.

So my thinking has changed a little and currently working on this.

Have a public website using the 3rd party template with some NTWS elements, embedding NTWS procedures, intelligent menu etc.
but as soon as someone logs in then direct to a NT only site and have the business end of the browse and forms in this area.
This way it will harness the latest NTWS functionality without trying to co-exist with a 3rd party template that might also be outdated.

If you change the 3rd party template and revamp the front end site, the main business end of the site is not affected and there is a lot less pain down the line.

As mentioned before , I am probably not the best to give advice, this has just been my method and experience.
There are probably better ways to achieve what you're looking to do.

regards

Johan

Below a little more info on how I did some work on a form just for illustration.
Maybe some of it can help you.

My idea was to replace all the NTWS CSS with the 3rd party css.

I attach more screen shots on the webserver and the form as examples on how I tried to achieve this.

I changed all the CSS settings on the webserver firstly to , see the screenshot.
'AAAA'
'BBBB'
'CCCC'
Then look at the generated HTML and you can see what level and where the CSS is specified.
Then I looked at my 3rd part template to see which CSS tags correspond and then specify them in the correct place in NTWS
Either at webserver level or at form level.

There are lots of little gotchas , here are just a few I can think of now.
1) Even if you remove NT CSS tag in the IDE, the template still added some default CSS in, this could be different today.

2) Later NTWS was on a newer version of Jquery than the 3rd party template and I had to do something to allow for this as some functions were deprecated that was used in the 3rd party JS.

3) you can specify the CSS on webserver level for the form and then it will flow down to the forms, but sometimes the CSS is field specific
eg.
For responsive grid they used these CSS classes
'column nopadding one-third'
'column nopadding two-third last-col'
So it could not be specified on webserver level but only on field level in the form.

4) I did not get so far that I could replace all the NTWS css, and I had to comment out this line in the Nettalk grid css file otherwise the 3rd party css would be affected.
*, *::after, *::before {box-sizing: border-box;}

JohanR · « **Reply #8 on:** February 04, 2021, 12:02:42 AM »

Hi Jason

Just to add ,
It's been awhile since my implementation and with the newer version of NTWS I have to revisit my pages anyway to confirm all still OK and it might be easier to integrate a 3rd party template currently.
It's on my list todo at the moment and will be doing some more work on it soon, will give some feedback if I gain any more knowledge.

regards

Johan

Alberto · « **Reply #9 on:** February 04, 2021, 06:32:38 AM »

As far as I know, you can make a static page an embed a Nt Browse inside using <-- xxxxxx --> see docs

ntnewbies · « **Reply #10 on:** February 04, 2021, 07:17:11 PM »

thanks johan for the further details. Very helpful indeed.

thanks michelis for the tip.

I have done testing on my side too. When i put < nameofprocedure > into the html, the problem is the conflict of using same jquery/bootstrap css and js that breaks the form. thus, the only solution is to create a new css and js and puts only codes that are not contradicting. but it is another pain when we need to add in some website theme css into the nettalk so that it appears blend with the theme color /feel.

johan, i notice at your wine vineyard website contact page, you have successfully include the login form and blend with the website theme. i notice in the page source that you include the script code "before" the form instead of declaring the form js at header/footer. May i know which embed point that you use to put that script?

regards,
jason

Bruce · « **Reply #11 on:** February 04, 2021, 09:32:45 PM »

>> I want to provide some "default design template" for customers to choose. As such, i pick some website templates online and trying to fine tune it

I would strongly advise against this route. Going down this road leads to more and more problems as you are forever integrating two frameworks together.

A much better approach is simply to make use of the CSS and JavaScript that NetTalk already provides, and build your template using those resources.

Cheers
Bruce

JohanR · « **Reply #12 on:** February 05, 2021, 01:50:29 AM »

Hi Jason

As mentioned before, I have used this method for many years, but have decided on a different course of action going forward.

The public site, will be hybrid and after sign in I will switch to a pure NTWS site.
On the current public site there are quite a few places where I embed NTWS procedures or write source code that outputs HTML that is published, so it works well.

I am just finding that once you get into the real business end of browses and forms, there have been enormous advances in NTWS and by incorporating a 3rd party template and CSS/JS
it could exclude a lot of the newer functions of NTWS.

So advice would be to consider carefully on how to implement.

As it is, I have to replace my current 3rd party template with a newer one, as the updates on the current one dried up about 3 years ago, so jquery is an older version and NTWS is on a newer one.
Also be careful using a template with bootstrap, again many years ago, I had lots of issues, not sure currently

Attached more info on what I've done.
The scripts are not at form level or embed, I add the 3rd party scripts in the webserver.

I create a page header and footer, which is used on every page, static or NT (Yellow section)
I also create a form header and footer (Red section)
The green section is what the NTWS from generates.

These headers and footers are essentially wrappers which makes whatever is inside them play nicely with the page layout of the 3rd party template.

So you have to look at the 3rd party template and identify what html wraps those logical sections, whether it's the page or an element (form or browse section)

Also play around with the settings in the webserver that generates divs and wrappers, I also attach a screenshot of that. (content body div)

Keep changing the settings and look at the html output using the Dev mode in firefox or chrome and you will see what will apply to your template.

Again, things change in NTWS as it gets upgrades and improves on repsonsive optiosn etc, and with every upgrade not sure how it will effect the merging of the 2 frameworks.
NTWS will generate html in a certain way and the 3rd party html is done in a certain, each with it's own corresponding CSS and JS

Hope some of this helps you.

regards

Johan

JohanR · « **Reply #13 on:** February 05, 2021, 02:06:06 AM »

Hi Jason,

Think you also asked about the google maps JS insertion.
I use the same method for all my static pages,
create a Netwebpage procedure
Include the TVCHeader and TVCFooter (this will be the wrapper)
and then specify which HTM file from disk will included
Identify in your 3rd party template which html section makes up the inside section of the page and save that to the static file on disk.

the Maps JS is in the static page HTML file that is on disk.
So it's a straight section of HTML and the name is ae_contact.htm

Look at attachment contact_form.jpg should show you how I insert that file into the page.
The layout attachment shows you the HTML in yellow that is in the actual file on disk, the JS is in red.

See attacments.

Hope it makes sense

regards

Johan

ntnewbies · « **Reply #14 on:** February 05, 2021, 03:09:22 AM »

excellent explanation Johan. Thank you very very much.

Bruce, yes, i could foresee many issues once the scripts gets updated from either side.

jason

NetTalk Central

Author Topic: nettalk and website template (Read 3893 times)

ntnewbies

nettalk and website template

DonRidley

Re: nettalk and website template

ntnewbies

Re: nettalk and website template

Bruce

Re: nettalk and website template

JohanR

Re: nettalk and website template

ntnewbies

Re: nettalk and website template

ntnewbies

Re: nettalk and website template

JohanR

Re: nettalk and website template

JohanR

Re: nettalk and website template

Alberto

Re: nettalk and website template

ntnewbies

Re: nettalk and website template

Bruce

Re: nettalk and website template

JohanR

Re: nettalk and website template

JohanR

Re: nettalk and website template

ntnewbies

Re: nettalk and website template