Thiết kế website giá rẻ

Question

I’m just getting into java and php and so I looked for something online and I helped myself with AI to create something that worked, so I apologize in advance if I don’t understand something and if I post errors.

I’m creating a site for a car dealer (purely advertising,
you don’t buy anything) and I need to create a form that the gentleman will fill out every month (obviously it is hidden on a page accessible with password) the form with the info of the cars with the various characteristics and this information then must go to create a POST on the site. (must come like pic.1)
I am ignorant about backend and frontend, but is this possible? (I guess so)

I tried to implement jotform and I was able to get something from it but it didn’t appear like a written post, you could see the whole table behind it (see pic.2) and I didn’t like it at all.
I tried with AI to create something,
and it works locally, but if I publish the site obviously the data doesn’t remain, if I refresh the page everything is cleaned up and therefore in practice nothing was written on the site, but it was a local memory. I had to unlock (if I understood correctly…
) the html page to give permission to the server to write on the page but obviously I don’t know how to do this from the host… I use register.it (horrible, but they forced me).

Help me please.

*result i want pic.1
*
*form example
*
*jotform result pic.2
*

this is my js code



// Contatore per generare ID univoci per il carousel
var carouselIdCounter = 0;

// Array per salvare le URL delle immagini caricate
var imageUrls = [];

// Carica i dati dal backend all'avvio della pagina
window.onload = function() {
    loadSavedCars();
};

// Funzione per caricare le auto salvate dal backend
function loadSavedCars() {
    fetch('http://localhost:3000/api/cars')
        .then(response => response.json())
        .then(cars => {
            cars.forEach(car => {
                displayCar(car);
            });
        });
}

// Funzione per aggiungere l'immagine alla lista delle immagini
function addImageToList() {
    var imageInput = document.getElementById("image");
    var files = imageInput.files;
    if (files.length > 0) {
        // Crea un URL temporaneo per l'immagine e aggiungilo all'array
        var url = URL.createObjectURL(files[0]);
        imageUrls.push(url);

        // Aggiungi l'immagine alla lista visuale
        var imageList = document.getElementById("imageList");
        var imgElement = document.createElement("img");
        imgElement.src = url;
        imgElement.style.width = "100px"; // Puoi modificare o rimuovere questa riga se preferisci
        imgElement.style.marginRight = "10px"; // Puoi modificare o rimuovere questa riga se preferisci
        imageList.appendChild(imgElement);

        // Resetta l'input per permettere l'aggiunta di nuove immagini
        imageInput.value = "";
    }
}

// Funzione per creare la card con tutte le immagini e i dati
function addImage() {
    var marca = document.getElementById("marca").value;
    var modello = document.getElementById("modello").value;
    var prezzo = document.getElementById("prezzo").value;
    var km = document.getElementById("km").value;
    var alimentazione = document.getElementById("alimentazione").value;
    var cambio = document.getElementById("cambio").value;

    // Creiamo un oggetto per rappresentare la nuova auto
    var newCar = {
        marca: marca,
        modello: modello,
        prezzo: prezzo,
        km: km,
        alimentazione: alimentazione,
        cambio: cambio,
        images: imageUrls
    };

    // Invia i dati al backend per salvarli
    fetch('http://localhost:3000/api/cars', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(newCar)
    })
    .then(response => response.json())
    .then(car => {
        // Visualizziamo l'auto appena creata
        displayCar(car);

        // Resetta i campi del form e la lista delle immagini
        imageUrls = [];
        document.getElementById("imageList").innerHTML = "";
        resetForm();
    });
}

// Funzione per visualizzare una card di un'auto
function displayCar(car) {
    // Genera un ID univoco per il carousel
    var carouselId = 'carouselExample' + carouselIdCounter++;

    var cardTemplate = '<div class="card" style="margin-left: 500px; margin-top: 100px; width: 40rem;">' +
        '    <div id="' + carouselId + '" class="carousel slide" data-bs-ride="carousel">' +
        '        <div class="carousel-inner">';

    // Aggiungi le immagini alla card
    car.images.forEach((url, index) => {
        cardTemplate += '            <div class="carousel-item ' + (index === 0 ? 'active' : '') + '">' +
            '                <img src="' + url + '" alt="Auto Image">' + // Rimuovi le classi fisse
            '            </div>';
    });

    cardTemplate += '        </div>' +
        '        <button class="carousel-control-prev" type="button" data-bs-target="#' + carouselId + '" data-bs-slide="prev">' +
        '            <span class="carousel-control-prev-icon" aria-hidden="true"></span>' +
        '            <span class="visually-hidden">Previous</span>' +
        '        </button>' +
        '        <button class="carousel-control-next" type="button" data-bs-target="#' + carouselId + '" data-bs-slide="next">' +
        '            <span class="carousel-control-next-icon" aria-hidden="true"></span>' +
        '            <span class="visually-hidden">Next</span>' +
        '        </button>' +
        '    </div>' +
        '    <div class="card-body">' +
        '      <h5 class="card-title">' + car.marca + ' ' + car.modello + '</h5>' +
        '      <p class="card-text">Prezzo: ' + car.prezzo + ' €</p>' +
        '      <p class="card-text">Km: ' + car.km + '</p>' +
        '      <p class="card-text">Alimentazione: ' + car.alimentazione + '</p>' +
        '      <p class="card-text">Cambio: ' + car.cambio + '</p>' +
        '      <button type="button" class="btn btn-primary" onclick="UpdateImage()">Aggiorna Auto</button>' +
        '      <button type="button" class="btn btn-danger" onclick="deleteImage()">Elimina Auto</button>' +
        '    </div>' +
        '</div>';

    document.getElementById("addBlog").insertAdjacentHTML("beforebegin", cardTemplate);

    // Re-inizializza il carousel
    var myCarousel = new bootstrap.Carousel(document.getElementById(carouselId), {
        interval: false
    });
}

// Funzione per resettare i campi del form
function resetForm() {
    document.getElementById("marca").value = "";
    document.getElementById("modello").value = "";
    document.getElementById("prezzo").value = "";
    document.getElementById("km").value = "";
    document.getElementById("alimentazione").selectedIndex = 0;
    document.getElementById("cambio").selectedIndex = 0;
    document.getElementById("image").value = "";
}

function UpdateImage() {
    // Funzionalità per aggiornare i dettagli dell'auto
    alert('Funzione di aggiornamento non implementata.');
}

function deleteImage() {
    // Funzionalità per eliminare la card dell'auto
    alert('Funzione di eliminazione non implementata.');
}

Thiết kế website giá rẻ

Danh mục

Need a way for upload content on my site from a form