How to connect Frontend and Backend?

  • Thread starter Thread starter geekynerd
  • Start date Start date
geekynerd
Messages
35
Reaction score
6
i am a cse student and as a second year student i started building apps. by sing chatgpt i am getting frontend files and backend files but i fail to connect those files. how to learn it and when i asked my friend he said learn about api keys. should i learn that or learn something new
 
Technology news on Phys.org
geekynerd said:
i am a cse student and as a second year student i started building apps. by sing chatgpt i am getting frontend files and backend files but i fail to connect those files. how to learn it and when i asked my friend he said learn about api keys. should i learn that or learn something new

“API keys” sound to me pretty vague. There should be a pretty secure “wall” between your frontend and your backend. Like your webbased frontend talking to your (mainframe or dedicated server) backend through an application server using e.g. Microsoft Queue.

Just one scenario out of many…

EDIT: I was a little too fast there. Your friend’s suggestion ran across this Line I think:

Google Cloud API Keys

Due to the fact that I’m a dinosaur and don’t follow the AI methodology as much as I should your friend may indeed have a point. Don’t ignore me but take my oldschool view into account along with your friend’s :smile:

Man, the computer world moves so fast that even Moore would be surprised.
 
Last edited:
i like hearing all the suggestion and take everything into consideration :) . for connecting the backend while building a website is easy just use a script tag in html but if we go to app development it gets hard like too many terms ssl http https like what. i dont know you heard of the term vibe coding but i am a vibe coder and i am not definitely not proud of that but to survive in this competitive market i need to build up a strong resume and i have no time to learn new skill and i am just a prey to ai and my real doubt where to start learning there is more things
 
Well it’s certainly a new term, if not a new concept, to me. I can understand people taking all the shortcuts available to them and I’m sure I don’t need to warn you about the inherent dangers in your approach. You seem to be perfectly aware. Take care. I have a nagging feeling that this is what the future looks like now. :smile:
 
Is it possible we are overthinking this? Maybe we should start with the "Is it plugged in and turned on" approach.

@geekynerd: API keys are usually about hooking up to an existing, third party back-end. eg. Google has a maps API. If you have the keys, you call into their API and they give you their data.

But if you are being given backend files (eg. PHP files), you must serve them up from a server yourself.
You cannot run a back-end based app from your local drive the way you might with flat HTML files. Are you familiar with serving up your pages on a webhost?

I may be off-case here but let's see what we're working with.
 
DaveC426913 said:
Is it possible we are overthinking this? Maybe we should start with the "Is it plugged in and turned on" approach.

@geekynerd: API keys are usually about hooking up to an existing, third party back-end. eg. Google has a maps API. If you have the keys, you call into their API and they give you their data.

But if you are being given backend files (eg. PHP files), you must serve them up from a server yourself.
You cannot run a back-end based app from your local drive the way you might with flat HTML files. Are you familiar with serving up your pages on a webhost?

I may be off-case here but let's see what we're working with.
That’s certainly a sober view. Taking a step backwards is probably the right thing to do. Especially in the context of this “vibe” approach. Re-reading my answer in that context it must have sounded like downright gibberish!
 
I’m almost loathe to suggest/“warn” of this, but is it possible that this forum needs a “vibe” section? o0) :cry:
 
  • Wow
  • Like
Likes berkeman and geekynerd
DaveC426913 said:
Is it possible we are overthinking this? Maybe we should start with the "Is it plugged in and turned on" approach.

@geekynerd: API keys are usually about hooking up to an existing, third party back-end. eg. Google has a maps API. If you have the keys, you call into their API and they give you their data.

But if you are being given backend files (eg. PHP files), you must serve them up from a server yourself.
You cannot run a back-end based app from your local drive the way you might with flat HTML files. Are you familiar with serving up your pages on a webhost?

I may be off-case here but let's see what we're working with.
yeah i have made some webpages and hosted some static webpages

these are some of mine
[Links redacted by the Mentors]
 
Last edited by a moderator:
geekynerd said:
yeah i have made some webpages and hosted some static webpages

these are some of mine
[Links redacted by the Mentors]
please dont share those website with anyone and that spark and stream website open the website in pc and hover over the image. and please i request you do not share this website with anyone
 
Last edited by a moderator:
  • #10
Well, posting them on a publicly accessible forum might be a bad idea then?!

You know about indexing robots, right?
 
  • Like
Likes berkeman and geekynerd
  • #11
sbrothy said:
Well, posting them on a publicly accessible forum might be a bad idea then?!

You know about indexing robots, right?
NO.
 
  • #12
I have reported the post to ask the mods to redact the links.

Why do you not want them shared? The nature of web dev is generally that it is publicly available.
 
  • #13
Thread closed temporarily for Moderation.
 
  • #14
The links have been redacted and this thread is reopened provisionally.

sbrothy said:
You know about indexing robots, right?
geekynerd said:
NO.
They are bots used by the big search engine companies (mainly Google now, but some others as well) to archive discussion forum pages and make them available to their search users. So even if a post or thread gets deleted (or modified in this case), using the right search terms can turn up those archived pages as originally posted.

So even though your links have been redacted from this thread just now, they were likely archived by search engine bots within a few minutes when you posted your replies. Please keep that in mind in your future posts here and at other discussion forums on the Internet.
 
Last edited:
  • #15
berkeman said:
The links have been redacted and this thread is reopened provisionally.



They are bots used by the big search engine companies (mainly Google now, but some others as well) to archive discussion forum pages and make them available to their search users. So even if a post or thread gets deleted (or modified in this case), using the right search terms can turn up those archived pages as originally posted.

So even though your links have been redacted from this thread just now, they were likely archived by search engine bots within a few minutes when you posted your replies. Please keep that in mind in your future posts here and at other discussion forums on the Internet.
This is IMHO a good example of the dangers inherent in the so called “vibe” method. Without a knowledge of the basic workings of the net, protocols, etc, the traps are legion.
 
  • #16
sbrothy said:
I’m almost loathe to suggest/“warn” of this, but is it possible that this forum needs a “vibe” section? o0) :cry:
I’m well aware I was being inappropiately cheeky here. Hence the emoticons. It was a tongue-in-cheek suggestion! :smile:
 
  • #17
sbrothy said:
I’m almost loathe to suggest/“warn” of this, but is it possible that this forum needs a “vibe” section? o0) :cry:
So, when I asked ChatGPT to write a birthday calculator for my kitten for fun, that was Vibe Coding, eh?

I'll be sure to put Vibe Coder on my resume.
 
  • Like
  • Haha
Likes Borg and sbrothy
  • #18
geekynerd said:
NO.
If you're using a web server such as Apache or Windows IIS there is (or possibly should be) a file called robots.txt (Google Search Central) (If you just google "robots.txt" there are quite a few videos explaining the concept) in the root of the server describing your server's attitude towards these "crawlers". Be warned that they are guidelines only though. A malicious robot might well just ignore it.
 
  • #19
sbrothy said:
A malicious robot might well just ignore it.
I would put Shodan in that category. Since they crawl the web looking for every available port on any public facing IP address, they aren't paying any attention to stuff like a text file on port 80 or 443 (http and https for you vibe coders). The last time that I put a server on the internet, they knew about it within a few hours - including which ports were exposed and what server I was running. Within days, I had servers in Europe and Russia hitting those ports trying to break in.

Shodan doesn't seem to care to who they sell your server IP address info to. Got a server that you didn't change the default admin password for? They'll find it, document it and sell it. Next thing you know, your server is a bot doing far more than you bargained for. BTW, IP addresses and port numbers apply to door cams, baby cams, printers, etc. If it's exposed to the internet, they'll find it.
 
  • Informative
Likes sbrothy and DaveC426913
  • #20
Last edited:
  • #21
Vibe Coding in Practice: Motivations, Challenges, and a Future Outlook -- a Grey Literature Review

AI code generation tools are transforming software development, especially for novice and non-software developers, by enabling them to write code and build applications faster and with little to no human intervention. Vibe coding is the practice where users rely on AI code generation tools through intuition and trial-and-error without necessarily understanding the underlying code. Despite widespread adoption, no research has systematically investigated why users engage in vibe coding, what they experience while doing so, and how they approach quality assurance (QA) and perceive the quality of the AI-generated code. To this end, we conduct a systematic grey literature review of 101 practitioner sources, extracting 518 firsthand behavioral accounts about vibe coding practices, challenges, and limitations. Our analysis reveals a speed-quality trade-off paradox, where vibe coders are motivated by speed and accessibility, often experiencing rapid ``instant success and flow'', yet most perceive the resulting code as fast but flawed. QA practices are frequently overlooked, with many skipping testing, relying on the models' or tools' outputs without modification, or delegating checks back to the AI code generation tools. This creates a new class of vulnerable software developers, particularly those who build a product but are unable to debug it when issues arise. We argue that vibe coding lowers barriers and accelerates prototyping, but at the cost of reliability and maintainability. These insights carry implications for tool designers and software development teams. Understanding how vibe coding is practiced today is crucial for guiding its responsible use and preventing a broader QA crisis in AI-assisted development.
 
  • #22
I see a possible use for this in developing fast use cases for a potential customer as these are often accepted as flawed and hastily put together.

EDIT: Possibly unit tests too, come to think about it. If you “vibe” those first maybe you have a more solid approach…

EDIT2: User interfaces probably wont fly. I don't know how you'd write unit tests for those. And then there's the whole multithreading issue. Darn what a mess it could end up as!

Configuring an application server is something else though.

EDIT3: FTR @Borg "agreed" before all the EDITs.
 
Last edited:
  • #23
I wonder what would happen if you apply vibe coding to a functional language like Miranda? Would you suddenly master tensor calculus? :smile:

I’d expect disastrous spaghetti code using eg Perl or Lisp! o0)

EDIT: Hah! Or Brainf…!
 
Last edited:
  • #24
Ok I tried to “vibe” a complex number class. Of course I know what to ask for but it’s probably still riddled with errors:

Using C++, write a header only implementation of an object representing a complex number. Use include guards. Encapsulate the two parts of the complex number as data type double. Make them protected so potential subclasses can access them directly and call the imaginary variable “m_imag”, and the real one “m_real”. I want public getters and setters for them.

I want a default constructor initializing the members to zero.

I want an explicit constructor for initializing the members.
I want a copy constructor.

I want all relevant mathematical operators overloaded according to the rules for complex numbers.

I want input/output streaming operators overloaded. You decide if they should be friends or not.

I want the class body to only contain function declarations using variable names.

Implememtations should follow after the class.

Pertaining to style I want it to be human readable, using tabs of 4 spacea, opening curly brackets to start on the next line for classes, structs, and functions, but code inside functions should have the curly bracket on the same line. An example as pseuducode:

class complex
{
protected:
double m_real, m_imag;
public:
complex some_func(const double, const double);
};

complex complex::some_func(const double r, const double i)
{
if(m_real != 0) {
// do something
} else if(m_imag != 0) {
// do something else
} else {
// do something third
}

return *this;
}

Go.

C++:
#ifndef COMPLEX_HPP
#define COMPLEX_HPP

#include <iostream>

class complex
{
protected:
    double m_real;
    double m_imag;

public:
    complex();
    explicit complex(const double real, const double imag = 0.0);
    complex(const complex &other);

    double real() const;
    double imag() const;
    void set_real(const double real);
    void set_imag(const double imag);

    complex operator+(const complex &rhs) const;
    complex operator-(const complex &rhs) const;
    complex operator*(const complex &rhs) const;
    complex operator/(const complex &rhs) const;

    complex &operator+=(const complex &rhs);
    complex &operator-=(const complex &rhs);
    complex &operator*=(const complex &rhs);
    complex &operator/=(const complex &rhs);

    complex operator+() const;
    complex operator-() const;

    bool operator==(const complex &rhs) const;
    bool operator!=(const complex &rhs) const;

    friend std::ostream &operator<<(std::ostream &os, const complex &c);
    friend std::istream &operator>>(std::istream &is, complex &c);
};

// Default constructor
complex::complex()
    : m_real(0.0), m_imag(0.0)
{
}

// Explicit constructor
complex::complex(const double real, const double imag)
    : m_real(real), m_imag(imag)
{
}

// Copy constructor
complex::complex(const complex &other)
    : m_real(other.m_real), m_imag(other.m_imag)
{
}

// Getters
double complex::real() const
{
    return m_real;
}

double complex::imag() const
{
    return m_imag;
}

// Setters
void complex::set_real(const double real)
{
    m_real = real;
}

void complex::set_imag(const double imag)
{
    m_imag = imag;
}

// Arithmetic operators
complex complex::operator+(const complex &rhs) const
{
    return complex(m_real + rhs.m_real, m_imag + rhs.m_imag);
}

complex complex::operator-(const complex &rhs) const
{
    return complex(m_real - rhs.m_real, m_imag - rhs.m_imag);
}

complex complex::operator*(const complex &rhs) const
{
    return complex(
        m_real * rhs.m_real - m_imag * rhs.m_imag,
        m_real * rhs.m_imag + m_imag * rhs.m_real
    );
}

complex complex::operator/(const complex &rhs) const
{
    double denom = rhs.m_real * rhs.m_real + rhs.m_imag * rhs.m_imag;
    return complex(
        (m_real * rhs.m_real + m_imag * rhs.m_imag) / denom,
        (m_imag * rhs.m_real - m_real * rhs.m_imag) / denom
    );
}

// Compound assignment operators
complex &complex::operator+=(const complex &rhs)
{
    m_real += rhs.m_real;
    m_imag += rhs.m_imag;
    return *this;
}

complex &complex::operator-=(const complex &rhs)
{
    m_real -= rhs.m_real;
    m_imag -= rhs.m_imag;
    return *this;
}

complex &complex::operator*=(const complex &rhs)
{
    double real = m_real * rhs.m_real - m_imag * rhs.m_imag;
    double imag = m_real * rhs.m_imag + m_imag * rhs.m_real;
    m_real = real;
    m_imag = imag;
    return *this;
}

complex &complex::operator/=(const complex &rhs)
{
    double denom = rhs.m_real * rhs.m_real + rhs.m_imag * rhs.m_imag;
    double real = (m_real * rhs.m_real + m_imag * rhs.m_imag) / denom;
    double imag = (m_imag * rhs.m_real - m_real * rhs.m_imag) / denom;
    m_real = real;
    m_imag = imag;
    return *this;
}

// Unary operators
complex complex::operator+() const
{
    return *this;
}

complex complex::operator-() const
{
    return complex(-m_real, -m_imag);
}

// Comparison operators
bool complex::operator==(const complex &rhs) const
{
    return m_real == rhs.m_real && m_imag == rhs.m_imag;
}

bool complex::operator!=(const complex &rhs) const
{
    return !(*this == rhs);
}

// Stream operators
std::ostream &operator<<(std::ostream &os, const complex &c)
{
    os << "(" << c.m_real << (c.m_imag >= 0 ? "+" : "") << c.m_imag << "i)";
    return os;
}

std::istream &operator>>(std::istream &is, complex &c)
{
    char ch;
    is >> ch; // skip '('
    if (ch != '(') {
        is.setstate(std::ios::failbit);
        return is;
    }

    is >> c.m_real >> c.m_imag >> ch; // read real, imag, and ')'
    if (ch != ')') {
        is.setstate(std::ios::failbit);
    }

    return is;
}

I’m actually a little surprised. I must admit it’s a timesaver. Intriguing.
 
  • #25
Using C++ version 20 at least (verify using preprocessor directives) write a header only template implementation of an object representing a complex number, restrain the possible data types to int, all long types, float, and double. Use include guards. Encapsulate the two parts of the complex number using the template type and make them protected so potential subclasses can access them directly and call the imaginary variable “m_imag”, and the real one “m_real”. I want public getters and setters for them.
I want a default constructor initializing the members to zero.
I want an explicit constructor for initializing the members.
I want a copy constructor.
I want all relevant mathematical operators overloaded according to the rules for complex numbers.
I want input/output streaming operators overloaded. You decide if they should be friends or not.
I want the class body to only contain function declarations using no variable names.

Implementations should follow after the class.

Pertaining to style I want it to be human readable, using tabs of 4 spaces, opening curly brackets to start on the next line for classes, structs, and function, but code inside functions should have the curly bracket on the same line. An example as pseuducode:
class complex
{
protected:
double m_real, m_imag;
public:
complex some_func(const double, const double);
};

complex complex::some_func(const double r, const double i)
{
if(m_real != 0) {
// do something
} else if(m_imag != 0) {
// do something else
} else {
// do something third
}

return *this;

}

Go

C++:
#ifndef COMPLEX_HPP
#define COMPLEX_HPP

#if __cplusplus < 202002L
    #error "C++20 or later is required."
#endif

#include <iostream>
#include <concepts>
#include <type_traits>
#include <cmath>

template<typename T>
concept AllowedType = std::same_as<T, int> ||
                      std::same_as<T, long> ||
                      std::same_as<T, long long> ||
                      std::same_as<T, float> ||
                      std::same_as<T, double>;

template<AllowedType T>
class complex
{
protected:
    T m_real;
    T m_imag;

public:
    complex();
    explicit complex(const T, const T);
    complex(const complex<T>&);

    T real() const;
    T imag() const;

    void set_real(const T);
    void set_imag(const T);

    complex<T>& operator=(const complex<T>&);
    complex<T> operator+(const complex<T>&) const;
    complex<T> operator-(const complex<T>&) const;
    complex<T> operator*(const complex<T>&) const;
    complex<T> operator/(const complex<T>&) const;

    complex<T>& operator+=(const complex<T>&);
    complex<T>& operator-=(const complex<T>&);
    complex<T>& operator*=(const complex<T>&);
    complex<T>& operator/=(const complex<T>&);

    template<AllowedType U>
    friend std::ostream& operator<<(std::ostream&, const complex<U>&);

    template<AllowedType U>
    friend std::istream& operator>>(std::istream&, complex<U>&);
};

// -------------------- Implementations --------------------

template<AllowedType T>
complex<T>::complex()
    : m_real(0), m_imag(0)
{
}

template<AllowedType T>
complex<T>::complex(const T r, const T i)
    : m_real(r), m_imag(i)
{
}

template<AllowedType T>
complex<T>::complex(const complex<T>& other)
    : m_real(other.m_real), m_imag(other.m_imag)
{
}

template<AllowedType T>
T complex<T>::real() const
{
    return m_real;
}

template<AllowedType T>
T complex<T>::imag() const
{
    return m_imag;
}

template<AllowedType T>
void complex<T>::set_real(const T r)
{
    m_real = r;
}

template<AllowedType T>
void complex<T>::set_imag(const T i)
{
    m_imag = i;
}

template<AllowedType T>
complex<T>& complex<T>::operator=(const complex<T>& other)
{
    m_real = other.m_real;
    m_imag = other.m_imag;
    return *this;
}

template<AllowedType T>
complex<T> complex<T>::operator+(const complex<T>& rhs) const
{
    return complex<T>(m_real + rhs.m_real, m_imag + rhs.m_imag);
}

template<AllowedType T>
complex<T> complex<T>::operator-(const complex<T>& rhs) const
{
    return complex<T>(m_real - rhs.m_real, m_imag - rhs.m_imag);
}

template<AllowedType T>
complex<T> complex<T>::operator*(const complex<T>& rhs) const
{
    T r = m_real * rhs.m_real - m_imag * rhs.m_imag;
    T i = m_real * rhs.m_imag + m_imag * rhs.m_real;
    return complex<T>(r, i);
}

template<AllowedType T>
complex<T> complex<T>::operator/(const complex<T>& rhs) const
{
    T denom = rhs.m_real * rhs.m_real + rhs.m_imag * rhs.m_imag;
    T r = (m_real * rhs.m_real + m_imag * rhs.m_imag) / denom;
    T i = (m_imag * rhs.m_real - m_real * rhs.m_imag) / denom;
    return complex<T>(r, i);
}

template<AllowedType T>
complex<T>& complex<T>::operator+=(const complex<T>& rhs)
{
    m_real += rhs.m_real;
    m_imag += rhs.m_imag;
    return *this;
}

template<AllowedType T>
complex<T>& complex<T>::operator-=(const complex<T>& rhs)
{
    m_real -= rhs.m_real;
    m_imag -= rhs.m_imag;
    return *this;
}

template<AllowedType T>
complex<T>& complex<T>::operator*=(const complex<T>& rhs)
{
    T r = m_real * rhs.m_real - m_imag * rhs.m_imag;
    T i = m_real * rhs.m_imag + m_imag * rhs.m_real;
    m_real = r;
    m_imag = i;
    return *this;
}

template<AllowedType T>
complex<T>& complex<T>::operator/=(const complex<T>& rhs)
{
    T denom = rhs.m_real * rhs.m_real + rhs.m_imag * rhs.m_imag;
    T r = (m_real * rhs.m_real + m_imag * rhs.m_imag) / denom;
    T i = (m_imag * rhs.m_real - m_real * rhs.m_imag) / denom;
    m_real = r;
    m_imag = i;
    return *this;
}

template<AllowedType T>
std::ostream& operator<<(std::ostream& out, const complex<T>& c)
{
    out << '(' << c.m_real;
    if (c.m_imag >= 0) {
        out << '+';
    }
    out << c.m_imag << 'i' << ')';
    return out;
}

template<AllowedType T>
std::istream& operator>>(std::istream& in, complex<T>& c)
{
    char ch;
    T r, i;

    in >> ch;
    if (ch != '(') {
        in.setstate(std::ios::failbit);
        return in;
    }

    in >> r >> i >> ch;
    if (ch != 'i') {
        in.setstate(std::ios::failbit);
        return in;
    }

    in >> ch;
    if (ch != ')') {
        in.setstate(std::ios::failbit);
        return in;
    }

    c.m_real = r;
    c.m_imag = i;

    return in;
}

#endif // COMPLEX_HPP

For someone who can actually already code I must admit this is an awesome tool. I even managed to use constraints from C++ 20 that I haven’t even understood yet, although I think GPT got it right.

EDIT: Still needs to be checked. The stream operators look a little suspicious…
 
Last edited:
  • #26
Though I can see how this might make you lazy…
 
Back
Top